@zohodesk/components 1.2.35 → 1.2.36

package/es/DropDown/DropDownSearch.js

@@ -37,14 +37,17 @@ export default class DropDownSearch extends React.Component {
       size,
       textBoxSize,
       placeHolder,
-      customClass
+      customClass,
+      dataId
     } = this.props;
     let {
       searchClass = '',
       customTextBox = ''
     } = customClass;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.search} ${style[`${size}Search`]} ${searchClass}`
+      className: `${style.search} ${style[`${size}Search`]} ${searchClass}`,
+      "data-id": dataId,
+      "data-test-id": dataId
     }, /*#__PURE__*/React.createElement(TextBox, {
       id: id,
       inputRef: this.getRef,

package/es/DropDown/__tests__/__snapshots__/DropDownSearch.spec.js.snap

@@ -4,6 +4,8 @@ exports[`DropDownSearch rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     class="search mediumSearch "
+    data-id="DropDownSearch"
+    data-test-id="DropDownSearch"
   >
     <input
       class="  container medium  default border effect  borderColor_default  "

package/es/DropDown/props/defaultProps.js

@@ -16,5 +16,6 @@ export const DropDownItem_defaultProps = {
 export const DropDownSearch_defaultProps = {
   size: 'medium',
   textBoxSize: 'medium',
-  customClass: {}
+  customClass: {},
+  dataId: 'DropDownSearch'
 };

package/es/DropDown/props/propTypes.js

@@ -58,7 +58,8 @@ export const DropDownSearch_propTypes = {
   customClass: PropTypes.shape({
     searchClass: PropTypes.string,
     customTextBox: PropTypes.string
-  })
+  }),
+  dataId: PropTypes.string
 };
 export const DropDownSeparator_propTypes = {
   customClass: PropTypes.string

package/es/ListItem/ListItemWithCheckBox.js

@@ -93,7 +93,8 @@ export default class ListItemWithCheckBox extends React.Component {
       customProps: ListItemProps,
       ...ContainerProps
     }, /*#__PURE__*/React.createElement(Box, {
-      className: style.iconBox
+      className: style.iconBox,
+      dataId: `${dataId ? dataId : value}_checkBox`
     }, /*#__PURE__*/React.createElement(CheckBox, {
       checked: checked,
       a11y: {

package/es/ListItem/ListItemWithRadio.js

@@ -94,7 +94,8 @@ export default class ListItemWithRadio extends React.Component {
       customProps: ListItemProps,
       ...ContainerProps
     }, /*#__PURE__*/React.createElement(Box, {
-      className: style.iconBox
+      className: style.iconBox,
+      dataId: `${dataId}_radio`
     }, /*#__PURE__*/React.createElement(Radio, {
       checked: checked,
       id: id,

package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap

@@ -13,9 +13,9 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
   >
     <div
       class="iconBox shrinkOff"
-      data-id="boxComponent"
+      data-id="List_checkBox"
       data-selector-id="box"
-      data-test-id="boxComponent"
+      data-test-id="List_checkBox"
     >
       <div
         aria-checked="false"

package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap

@@ -13,9 +13,9 @@ exports[`ListItemWithRadio rendering the defult props 1`] = `
   >
     <div
       class="iconBox shrinkOff"
-      data-id="boxComponent"
+      data-id="listItemWithRadioComp_radio"
       data-selector-id="box"
-      data-test-id="boxComponent"
+      data-test-id="listItemWithRadioComp_radio"
     >
       <div
         aria-checked="false"

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -924,7 +924,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       getRef: this.selectedOptionRef,
       onRemove: this.handleRemoveOption,
       onSelect: this.handleClickSelectedOption,
-      isGroupSelect: true
+      isGroupSelect: true,
+      dataId: `${dataId}_selectedOptions`
     }), /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: style.wrapper,
@@ -998,7 +999,8 @@ class AdvancedGroupMultiSelect extends React.Component {
           role: 'listbox',
           ariaMultiselectable: true
         },
-        alignBox: "row"
+        alignBox: "row",
+        dataId: `${dataId}_dropbox`
       }, /*#__PURE__*/React.createElement(Box, {
         flexible: true
       }, /*#__PURE__*/React.createElement(Card, {
@@ -1042,7 +1044,8 @@ class AdvancedGroupMultiSelect extends React.Component {
           listItemSize: listItemSize,
           a11y: {
             role: 'option'
-          }
+          },
+          dataId: `${dataId}_Options`
         }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -429,7 +429,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       isReadOnly: isReadOnly,
       getRef: this.selectedOptionRef,
       onRemove: this.handleRemoveOption,
-      onSelect: this.handleClickSelectedOption
+      onSelect: this.handleClickSelectedOption,
+      dataId: `${dataIdMultiSelectComp}_selectedOptions`
     }), moreCount > 0 ? /*#__PURE__*/React.createElement(Box, {
       className: style.more,
       onClick: this.handleMoreClick,
@@ -438,7 +439,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       flexible: true,
       className: style.wrapper,
       adjust: true,
-      shrink: true
+      shrink: true,
+      dataId: `${dataIdMultiSelectComp}_textBox`
     }, /*#__PURE__*/React.createElement("span", {
       className: ` ${style.custmSpan} ${textBoxSize === 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} ${isShowClearIcon ? style.clearIconSpace : ''}
               `
@@ -505,6 +507,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
           role: 'listbox',
           ariaMultiselectable: true
         },
+        dataId: `${dataIdMultiSelectComp}_dropbox`,
         ...DropBoxProps,
         alignBox: "row",
         isResponsivePadding: getFooter ? false : true
@@ -537,6 +540,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
         a11y: {
           role: 'option'
         },
+        dataId: `${dataIdMultiSelectComp}_Options`,
         ...SuggestionsProps
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,

package/es/MultiSelect/MultiSelect.js

@@ -900,7 +900,8 @@ export class MultiSelectComponent extends React.Component {
       onRemove: this.handleRemoveOption,
       onSelect: this.handleClickSelectedOption,
       size: size,
-      palette: palette
+      palette: palette,
+      dataId: `${dataId}_selectedOptions`
     }), /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: style.wrapper,

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -131,7 +131,8 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
         role: 'listbox'
       },
       isResponsivePadding: true,
-      alignBox: "row"
+      alignBox: "row",
+      dataId: `${dataId}_dropbox`
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, /*#__PURE__*/React.createElement(Card, {

package/es/MultiSelect/SelectedOptions.js

@@ -21,7 +21,8 @@ export default class SelectedOptions extends React.PureComponent {
       onRemove,
       onSelect,
       size,
-      palette
+      palette,
+      dataId
     } = this.props;
     const isDarkPalette = palette === 'dark' ? 'dark' : 'danger';
     return /*#__PURE__*/React.createElement(React.Fragment, null, selectedOptions.map(option => {
@@ -49,7 +50,8 @@ export default class SelectedOptions extends React.PureComponent {
       if (optionType === 'avatar') {
         return /*#__PURE__*/React.createElement(Box, {
           className: `${style.tag} ${style[size]}`,
-          key: `${id}photoTag`
+          key: `${id}photoTag`,
+          dataId: dataId
         }, /*#__PURE__*/React.createElement(Tag, { ...commonProps,
           active: highLightedSelectOptions.indexOf(id) >= 0,
           hasAvatar: true,
@@ -58,7 +60,8 @@ export default class SelectedOptions extends React.PureComponent {
       } else if (optionType === 'icon') {
         return /*#__PURE__*/React.createElement(Box, {
           className: `${style.tag} ${style[size]}`,
-          key: `${id}iconTag`
+          key: `${id}iconTag`,
+          dataId: dataId
         }, /*#__PURE__*/React.createElement(Tag, { ...commonProps,
           active: highLightedSelectOptions.indexOf(id) >= 0,
           iconName: icon,
@@ -68,7 +71,8 @@ export default class SelectedOptions extends React.PureComponent {
 
       return /*#__PURE__*/React.createElement(Box, {
         className: `${style.tag} ${style[size]}`,
-        key: `${id}tag`
+        key: `${id}tag`,
+        dataId: dataId
       }, /*#__PURE__*/React.createElement(Tag, { ...commonProps,
         active: highLightedSelectOptions.indexOf(id) >= 0
       }));

package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap

@@ -16,9 +16,9 @@ exports[`AdvancedMultiSelect rendering the defult props 1`] = `
     >
       <div
         class="wrapper grow basisAuto shrinkOn"
-        data-id="boxComponent"
+        data-id="multiSelectComp_textBox"
         data-selector-id="box"
-        data-test-id="boxComponent"
+        data-test-id="multiSelectComp_textBox"
       >
         <span
           class=" custmSpan custmSpanMedium 

package/es/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap

@@ -4,9 +4,9 @@ exports[`SelectedOptions rendering the basic select options 1`] = `
 <DocumentFragment>
   <div
     class="tag medium shrinkOff"
-    data-id="boxComponent"
+    data-id="selectedOptions"
     data-selector-id="box"
-    data-test-id="boxComponent"
+    data-test-id="selectedOptions"
   >
     <div
       aria-labelledby="1"
@@ -28,9 +28,9 @@ exports[`SelectedOptions rendering the basic select options 1`] = `
   </div>
   <div
     class="tag medium shrinkOff"
-    data-id="boxComponent"
+    data-id="selectedOptions"
     data-selector-id="box"
-    data-test-id="boxComponent"
+    data-test-id="selectedOptions"
   >
     <div
       aria-labelledby="2"
@@ -52,9 +52,9 @@ exports[`SelectedOptions rendering the basic select options 1`] = `
   </div>
   <div
     class="tag medium shrinkOff"
-    data-id="boxComponent"
+    data-id="selectedOptions"
     data-selector-id="box"
-    data-test-id="boxComponent"
+    data-test-id="selectedOptions"
   >
     <div
       aria-labelledby="3"

package/es/MultiSelect/props/defaultProps.js

@@ -149,7 +149,8 @@ export const MultiSelectWithAvatar_defaultProps = {
   needResponsive: true
 };
 export const SelectedOptions_defaultProps = {
-  size: 'medium'
+  size: 'medium',
+  dataId: 'selectedOptions'
 };
 export const Suggestions_defaultProps = {
   a11y: {}

package/es/MultiSelect/props/propTypes.js

@@ -139,7 +139,8 @@ export const SelectedOptions_propTypes = {
     optionType: PropTypes.string
   })),
   size: PropTypes.oneOf(['medium', 'xmedium']),
-  palette: PropTypes.string
+  palette: PropTypes.string,
+  dataId: PropTypes.string
 };
 export const Suggestions_propTypes = {
   a11y: PropTypes.shape({

package/es/Select/SelectWithAvatar.js

@@ -209,7 +209,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       size: tagSize
     })) : null, /*#__PURE__*/React.createElement(Box, {
       flexible: true,
-      className: style.textBox
+      className: style.textBox,
+      dataId: `${dataId}_textBox`
     }, /*#__PURE__*/React.createElement(Textbox, {
       a11y: {
         ariaActivedescendant: selectedId,
@@ -257,7 +258,8 @@ class SelectWithAvatarComponent extends SelectComponent {
         needResponsive: needResponsive,
         isPadding: false,
         isResponsivePadding: true,
-        alignBox: "row"
+        alignBox: "row",
+        dataId: `${dataId}_dropbox`
       }, isLoading ? /*#__PURE__*/React.createElement(Container, {
         align: "both",
         className: style.loader
@@ -295,6 +297,7 @@ class SelectWithAvatarComponent extends SelectComponent {
           role: 'heading'
         }
       })) : null, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
+        dataId: `${dataId}_Options`,
         activeId: selectedId,
         suggestions: suggestions,
         getRef: this.suggestionItemRef,

package/es/Select/SelectWithIcon.js

@@ -377,7 +377,8 @@ class SelectWithIcon extends Component {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: iconName,
       size: iconSize,
-      iconClass: iconClass
+      iconClass: iconClass,
+      dataId: `${dataId}_icon`
     })) : null, /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, /*#__PURE__*/React.createElement(TextBoxIcon, {
@@ -470,7 +471,8 @@ class SelectWithIcon extends Component {
       }))) : null, /*#__PURE__*/React.createElement(CardContent, {
         customClass: `${tabletMode ? style.responsivedropBoxList : style.dropBoxList} ${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''}`,
         shrink: true,
-        eleRef: this.scrollContentRef
+        eleRef: this.scrollContentRef,
+        dataId: `${dataId}_Options`
       }, options.length ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map((options, i) => {
         let {
           iconName,

package/es/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap

@@ -16,9 +16,9 @@ exports[`SelectWithAvatar rendering the defult props 1`] = `
     >
       <div
         class="grow basis shrinkOff"
-        data-id="boxComponent"
+        data-id="selectWithAvatar_textBox"
         data-selector-id="box"
-        data-test-id="boxComponent"
+        data-test-id="selectWithAvatar_textBox"
       >
         <input
           aria-activedescendant=""

package/es/Tab/Tabs.js

@@ -508,13 +508,15 @@ class Tabs extends React.Component {
         ...DropBoxProps,
         isResponsivePadding: true,
         needFocusScope: true,
-        onClose: this.togglePopup
+        onClose: this.togglePopup,
+        dataId: `${dataId}_dropbox`
       }, getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(this.props), /*#__PURE__*/React.createElement(Box, {
         flexible: true,
         shrink: true,
         scroll: "vertical",
         className: `${tabletMode ? '' : tabsStyle.menuBox} ${moreBoxClass}`,
-        onScroll: this.onScroll
+        onScroll: this.onScroll,
+        dataId: `${dataId}_Tabs`
       }, React.Children.map(moreTabs, child => {
         if (!child) {
           return null;

package/es/v1/DropDown/DropDownSearch.js

@@ -16,7 +16,8 @@ export default function DropDownSearch(props) {
     textBoxSize,
     placeHolder,
     customClass,
-    getRef
+    getRef,
+    dataId
   } = props;
   let {
     searchClass = '',
@@ -36,7 +37,9 @@ export default function DropDownSearch(props) {
   }
 
   return /*#__PURE__*/React.createElement("div", {
-    className: `${style.search} ${style[`${size}Search`]} ${searchClass}`
+    className: `${style.search} ${style[`${size}Search`]} ${searchClass}`,
+    "data-id": dataId,
+    "data-test-id": dataId
   }, /*#__PURE__*/React.createElement(TextBox, {
     id: id,
     inputRef: getReference,

package/es/v1/DropDown/props/defaultProps.js

@@ -16,5 +16,6 @@ export const DropDownItem_defaultProps = {
 export const DropDownSearch_defaultProps = {
   size: 'medium',
   textBoxSize: 'medium',
-  customClass: {}
+  customClass: {},
+  dataId: 'DropDownSearch'
 };

package/es/v1/DropDown/props/propTypes.js

@@ -58,7 +58,8 @@ export const DropDownSearch_propTypes = {
   customClass: PropTypes.shape({
     searchClass: PropTypes.string,
     customTextBox: PropTypes.string
-  })
+  }),
+  dataId: PropTypes.string
 };
 export const DropDownSeparator_propTypes = {
   customClass: PropTypes.string

package/es/v1/ListItem/ListItemWithCheckBox.js

@@ -75,7 +75,8 @@ const ListItemWithCheckBox = props => {
     customProps: ListItemProps,
     ...ContainerProps
   }, /*#__PURE__*/React.createElement(Box, {
-    className: style.iconBox
+    className: style.iconBox,
+    dataId: `${dataId ? dataId : value}_checkBox`
   }, /*#__PURE__*/React.createElement(CheckBox, {
     checked: checked,
     a11y: {

package/es/v1/ListItem/ListItemWithRadio.js

@@ -75,7 +75,8 @@ const ListItemWithRadio = props => {
     customProps: ListItemProps,
     ...ContainerProps
   }, /*#__PURE__*/React.createElement(Box, {
-    className: style.iconBox
+    className: style.iconBox,
+    dataId: `${dataId}_radio`
   }, /*#__PURE__*/React.createElement(Radio, {
     checked: checked,
     id: id,

package/es/v1/MultiSelect/AdvancedGroupMultiSelect.js

@@ -925,7 +925,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       getRef: this.selectedOptionRef,
       onRemove: this.handleRemoveOption,
       onSelect: this.handleClickSelectedOption,
-      isGroupSelect: true
+      isGroupSelect: true,
+      dataId: `${dataId}_selectedOptions`
     }), /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: style.wrapper,
@@ -999,7 +1000,8 @@ class AdvancedGroupMultiSelect extends React.Component {
           role: 'listbox',
           ariaMultiselectable: true
         },
-        alignBox: "row"
+        alignBox: "row",
+        dataId: `${dataId}_dropbox`
       }, /*#__PURE__*/React.createElement(Box, {
         flexible: true
       }, /*#__PURE__*/React.createElement(Card, {
@@ -1043,7 +1045,8 @@ class AdvancedGroupMultiSelect extends React.Component {
           listItemSize: listItemSize,
           a11y: {
             role: 'option'
-          }
+          },
+          dataId: `${dataId}_Options`
         }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,

package/es/v1/MultiSelect/AdvancedMultiSelect.js

@@ -429,7 +429,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       isReadOnly: isReadOnly,
       getRef: this.selectedOptionRef,
       onRemove: this.handleRemoveOption,
-      onSelect: this.handleClickSelectedOption
+      onSelect: this.handleClickSelectedOption,
+      dataId: `${dataIdMultiSelectComp}_selectedOptions`
     }), moreCount > 0 ? /*#__PURE__*/React.createElement(Box, {
       className: style.more,
       onClick: this.handleMoreClick,
@@ -438,7 +439,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       flexible: true,
       className: style.wrapper,
       adjust: true,
-      shrink: true
+      shrink: true,
+      dataId: `${dataIdMultiSelectComp}_textBox`
     }, /*#__PURE__*/React.createElement("span", {
       className: ` ${style.custmSpan} ${textBoxSize === 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} ${isShowClearIcon ? style.clearIconSpace : ''}
               `
@@ -505,6 +507,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
           role: 'listbox',
           ariaMultiselectable: true
         },
+        dataId: `${dataIdMultiSelectComp}_dropbox`,
         ...DropBoxProps,
         alignBox: "row",
         isResponsivePadding: getFooter ? false : true
@@ -537,6 +540,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
         a11y: {
           role: 'option'
         },
+        dataId: `${dataIdMultiSelectComp}_Options`,
         ...SuggestionsProps
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,

package/es/v1/MultiSelect/MultiSelect.js

@@ -901,7 +901,8 @@ export class MultiSelectComponent extends React.Component {
       onRemove: this.handleRemoveOption,
       onSelect: this.handleClickSelectedOption,
       size: size,
-      palette: palette
+      palette: palette,
+      dataId: `${dataId}_selectedOptions`
     }), /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: style.wrapper,

package/es/v1/MultiSelect/MultiSelectWithAvatar.js

@@ -134,7 +134,8 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
         role: 'listbox'
       },
       isResponsivePadding: true,
-      alignBox: "row"
+      alignBox: "row",
+      dataId: `${dataId}_dropbox`
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, /*#__PURE__*/React.createElement(Card, {

package/es/v1/MultiSelect/SelectedOptions.js

@@ -21,7 +21,8 @@ export default class SelectedOptions extends React.PureComponent {
       onRemove,
       onSelect,
       size,
-      palette
+      palette,
+      dataId
     } = this.props;
     const isDarkPalette = palette === 'dark' ? 'dark' : 'danger';
     return /*#__PURE__*/React.createElement(React.Fragment, null, selectedOptions.map(option => {
@@ -49,7 +50,8 @@ export default class SelectedOptions extends React.PureComponent {
       if (optionType === 'avatar') {
         return /*#__PURE__*/React.createElement(Box, {
           className: `${style.tag} ${style[size]}`,
-          key: `${id}photoTag`
+          key: `${id}photoTag`,
+          dataId: dataId
         }, /*#__PURE__*/React.createElement(Tag, { ...commonProps,
           active: highLightedSelectOptions.indexOf(id) >= 0,
           hasAvatar: true,
@@ -58,7 +60,8 @@ export default class SelectedOptions extends React.PureComponent {
       } else if (optionType === 'icon') {
         return /*#__PURE__*/React.createElement(Box, {
           className: `${style.tag} ${style[size]}`,
-          key: `${id}iconTag`
+          key: `${id}iconTag`,
+          dataId: dataId
         }, /*#__PURE__*/React.createElement(Tag, { ...commonProps,
           active: highLightedSelectOptions.indexOf(id) >= 0,
           iconName: icon,
@@ -68,7 +71,8 @@ export default class SelectedOptions extends React.PureComponent {
 
       return /*#__PURE__*/React.createElement(Box, {
         className: `${style.tag} ${style[size]}`,
-        key: `${id}tag`
+        key: `${id}tag`,
+        dataId: dataId
       }, /*#__PURE__*/React.createElement(Tag, { ...commonProps,
         active: highLightedSelectOptions.indexOf(id) >= 0
       }));

package/es/v1/MultiSelect/props/defaultProps.js

@@ -149,7 +149,8 @@ export const MultiSelectWithAvatar_defaultProps = {
   needResponsive: true
 };
 export const SelectedOptions_defaultProps = {
-  size: 'medium'
+  size: 'medium',
+  dataId: 'selectedOptions'
 };
 export const Suggestions_defaultProps = {
   a11y: {}

package/es/v1/MultiSelect/props/propTypes.js

@@ -139,7 +139,8 @@ export const SelectedOptions_propTypes = {
     optionType: PropTypes.string
   })),
   size: PropTypes.oneOf(['medium', 'xmedium']),
-  palette: PropTypes.string
+  palette: PropTypes.string,
+  dataId: PropTypes.string
 };
 export const Suggestions_propTypes = {
   a11y: PropTypes.shape({

package/es/v1/Select/SelectWithAvatar.js

@@ -209,7 +209,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       size: tagSize
     })) : null, /*#__PURE__*/React.createElement(Box, {
       flexible: true,
-      className: style.textBox
+      className: style.textBox,
+      dataId: `${dataId}_textBox`
     }, /*#__PURE__*/React.createElement(Textbox, {
       a11y: {
         ariaActivedescendant: selectedId,
@@ -257,7 +258,8 @@ class SelectWithAvatarComponent extends SelectComponent {
         needResponsive: needResponsive,
         isPadding: false,
         isResponsivePadding: true,
-        alignBox: "row"
+        alignBox: "row",
+        dataId: `${dataId}_dropbox`
       }, isLoading ? /*#__PURE__*/React.createElement(Container, {
         align: "both",
         className: style.loader
@@ -295,6 +297,7 @@ class SelectWithAvatarComponent extends SelectComponent {
           role: 'heading'
         }
       })) : null, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
+        dataId: `${dataId}_Options`,
         activeId: selectedId,
         suggestions: suggestions,
         getRef: this.suggestionItemRef,

package/es/v1/Select/SelectWithIcon.js

@@ -379,7 +379,8 @@ class SelectWithIcon extends Component {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: iconName,
       size: iconSize,
-      iconClass: iconClass
+      iconClass: iconClass,
+      dataId: `${dataId}_icon`
     })) : null, /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, /*#__PURE__*/React.createElement(TextBoxIcon, {
@@ -472,7 +473,8 @@ class SelectWithIcon extends Component {
       }))) : null, /*#__PURE__*/React.createElement(CardContent, {
         customClass: `${tabletMode ? style.responsivedropBoxList : style.dropBoxList} ${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''}`,
         shrink: true,
-        eleRef: this.scrollContentRef
+        eleRef: this.scrollContentRef,
+        dataId: `${dataId}_Options`
       }, options.length ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map((options, i) => {
         let {
           iconName,