@zohodesk/components 1.2.35 → 1.2.37

package/lib/Select/SelectWithAvatar.js

@@ -258,7 +258,8 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
         size: tagSize
       })) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
-        className: _MultiSelectModule["default"].textBox
+        className: _MultiSelectModule["default"].textBox,
+        dataId: "".concat(dataId, "_textBox")
       }, /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
         a11y: {
           ariaActivedescendant: selectedId,
@@ -304,7 +305,8 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           needResponsive: needResponsive,
           isPadding: false,
           isResponsivePadding: true,
-          alignBox: "row"
+          alignBox: "row",
+          dataId: "".concat(dataId, "_dropbox")
         }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           align: "both",
           className: _MultiSelectModule["default"].loader
@@ -342,6 +344,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
             role: 'heading'
           }
         })) : null, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+          dataId: "".concat(dataId, "_Options"),
           activeId: selectedId,
           suggestions: suggestions,
           getRef: _this2.suggestionItemRef,

package/lib/Select/SelectWithIcon.js

@@ -440,7 +440,8 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: iconName,
         size: iconSize,
-        iconClass: iconClass
+        iconClass: iconClass,
+        dataId: "".concat(dataId, "_icon")
       })) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
       }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
@@ -531,7 +532,8 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
         }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
           customClass: "".concat(tabletMode ? _SelectModule["default"].responsivedropBoxList : _SelectModule["default"].dropBoxList, " ").concat(!tabletMode && dropBoxSize ? _SelectModule["default"][dropBoxSize] : ''),
           shrink: true,
-          eleRef: _this5.scrollContentRef
+          eleRef: _this5.scrollContentRef,
+          dataId: "".concat(dataId, "_Options")
         }, options.length ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, options.map(function (options, i) {
           var iconName = options.iconName,
               iconSize = options.iconSize,

package/lib/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/lib/Tab/Tabs.js

@@ -501,7 +501,8 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
           position = _this$props8.position,
           customProps = _this$props8.customProps,
           getCustomDropBoxHeaderPlaceHolder = _this$props8.getCustomDropBoxHeaderPlaceHolder,
-          dataSelectorId = _this$props8.dataSelectorId;
+          dataSelectorId = _this$props8.dataSelectorId,
+          dataId = _this$props8.dataId;
       var _customProps$DropBoxP = customProps.DropBoxProps,
           DropBoxProps = _customProps$DropBoxP === void 0 ? {} : _customProps$DropBoxP,
           _customProps$ListItem = customProps.ListItemProps,
@@ -573,13 +574,15 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
         }, DropBoxProps, {
           isResponsivePadding: true,
           needFocusScope: true,
-          onClose: _this8.togglePopup
+          onClose: _this8.togglePopup,
+          dataId: "".concat(dataId, "_dropbox")
         }), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(_this8.props), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           flexible: true,
           shrink: true,
           scroll: "vertical",
           className: "".concat(tabletMode ? '' : _TabsModule["default"].menuBox, " ").concat(moreBoxClass),
-          onScroll: _this8.onScroll
+          onScroll: _this8.onScroll,
+          dataId: "".concat(dataId, "_Tabs")
         }, _react["default"].Children.map(moreTabs, function (child) {
           if (!child) {
             return null;

package/lib/v1/DropDown/DropDownSearch.js

@@ -35,7 +35,8 @@ function DropDownSearch(props) {
       textBoxSize = props.textBoxSize,
       placeHolder = props.placeHolder,
       customClass = props.customClass,
-      getRef = props.getRef;
+      getRef = props.getRef,
+      dataId = props.dataId;
   var _customClass$searchCl = customClass.searchClass,
       searchClass = _customClass$searchCl === void 0 ? '' : _customClass$searchCl,
       _customClass$customTe = customClass.customTextBox,
@@ -54,7 +55,9 @@ function DropDownSearch(props) {
   }
 
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(_DropDownSearchModule["default"].search, " ").concat(_DropDownSearchModule["default"]["".concat(size, "Search")], " ").concat(searchClass)
+    className: "".concat(_DropDownSearchModule["default"].search, " ").concat(_DropDownSearchModule["default"]["".concat(size, "Search")], " ").concat(searchClass),
+    "data-id": dataId,
+    "data-test-id": dataId
   }, /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
     id: id,
     inputRef: getReference,

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

@@ -25,6 +25,7 @@ exports.DropDownItem_defaultProps = DropDownItem_defaultProps;
 var DropDownSearch_defaultProps = {
   size: 'medium',
   textBoxSize: 'medium',
-  customClass: {}
+  customClass: {},
+  dataId: 'DropDownSearch'
 };
 exports.DropDownSearch_defaultProps = DropDownSearch_defaultProps;

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

@@ -79,7 +79,7 @@ var DropDownSearch_propTypes = (_DropDownSearch_propT = {
 }, _defineProperty(_DropDownSearch_propT, "placeHolder", _propTypes["default"].string), _defineProperty(_DropDownSearch_propT, "size", _propTypes["default"].oneOf(['small', 'medium'])), _defineProperty(_DropDownSearch_propT, "textBoxSize", _propTypes["default"].string), _defineProperty(_DropDownSearch_propT, "value", _propTypes["default"].string), _defineProperty(_DropDownSearch_propT, "customClass", _propTypes["default"].shape({
   searchClass: _propTypes["default"].string,
   customTextBox: _propTypes["default"].string
-})), _DropDownSearch_propT);
+})), _defineProperty(_DropDownSearch_propT, "dataId", _propTypes["default"].string), _DropDownSearch_propT);
 exports.DropDownSearch_propTypes = DropDownSearch_propTypes;
 var DropDownSeparator_propTypes = {
   customClass: _propTypes["default"].string

package/lib/v1/ListItem/ListItemWithCheckBox.js

@@ -96,7 +96,8 @@ var ListItemWithCheckBox = function ListItemWithCheckBox(props) {
     title: null,
     customProps: ListItemProps
   }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-    className: _ListItemModule["default"].iconBox
+    className: _ListItemModule["default"].iconBox,
+    dataId: "".concat(dataId ? dataId : value, "_checkBox")
   }, /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
     checked: checked,
     a11y: {

package/lib/v1/ListItem/ListItemWithRadio.js

@@ -96,7 +96,8 @@ var ListItemWithRadio = function ListItemWithRadio(props) {
     title: null,
     customProps: ListItemProps
   }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-    className: _ListItemModule["default"].iconBox
+    className: _ListItemModule["default"].iconBox,
+    dataId: "".concat(dataId, "_radio")
   }, /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
     checked: checked,
     id: id,

package/lib/v1/MultiSelect/AdvancedGroupMultiSelect.js

@@ -1014,7 +1014,8 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
         getRef: this.selectedOptionRef,
         onRemove: this.handleRemoveOption,
         onSelect: this.handleClickSelectedOption,
-        isGroupSelect: true
+        isGroupSelect: true,
+        dataId: "".concat(dataId, "_selectedOptions")
       }), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         className: _MultiSelectModule["default"].wrapper,
@@ -1085,7 +1086,8 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
             role: 'listbox',
             ariaMultiselectable: true
           },
-          alignBox: "row"
+          alignBox: "row",
+          dataId: "".concat(dataId, "_dropbox")
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           flexible: true
         }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
@@ -1128,7 +1130,8 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
             listItemSize: listItemSize,
             a11y: {
               role: 'option'
-            }
+            },
+            dataId: "".concat(dataId, "_Options")
           }));
         }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           options: revampedGroups,

package/lib/v1/MultiSelect/AdvancedMultiSelect.js

@@ -494,7 +494,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         isReadOnly: isReadOnly,
         getRef: this.selectedOptionRef,
         onRemove: this.handleRemoveOption,
-        onSelect: this.handleClickSelectedOption
+        onSelect: this.handleClickSelectedOption,
+        dataId: "".concat(dataIdMultiSelectComp, "_selectedOptions")
       }), moreCount > 0 ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _MultiSelectModule["default"].more,
         onClick: this.handleMoreClick,
@@ -503,7 +504,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         flexible: true,
         className: _MultiSelectModule["default"].wrapper,
         adjust: true,
-        shrink: true
+        shrink: true,
+        dataId: "".concat(dataIdMultiSelectComp, "_textBox")
       }, /*#__PURE__*/_react["default"].createElement("span", {
         className: " ".concat(_MultiSelectModule["default"].custmSpan, " ").concat(textBoxSize === 'xmedium' ? _MultiSelectModule["default"].custmSpanXmedium : _MultiSelectModule["default"].custmSpanMedium, " ").concat(isShowClearIcon ? _MultiSelectModule["default"].clearIconSpace : '', "\n              ")
       }, searchStr), /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
@@ -566,7 +568,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           a11y: {
             role: 'listbox',
             ariaMultiselectable: true
-          }
+          },
+          dataId: "".concat(dataIdMultiSelectComp, "_dropbox")
         }, DropBoxProps, {
           alignBox: "row",
           isResponsivePadding: getFooter ? false : true
@@ -598,7 +601,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           listItemSize: listItemSize,
           a11y: {
             role: 'option'
-          }
+          },
+          dataId: "".concat(dataIdMultiSelectComp, "_Options")
         }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           isLoading: isFetchingOptions,
           options: options,

package/lib/v1/MultiSelect/MultiSelect.js

@@ -981,7 +981,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         onRemove: this.handleRemoveOption,
         onSelect: this.handleClickSelectedOption,
         size: size,
-        palette: palette
+        palette: palette,
+        dataId: "".concat(dataId, "_selectedOptions")
       }), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         className: _MultiSelectModule["default"].wrapper,

package/lib/v1/MultiSelect/MultiSelectWithAvatar.js

@@ -186,7 +186,8 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
           role: 'listbox'
         },
         isResponsivePadding: true,
-        alignBox: "row"
+        alignBox: "row",
+        dataId: "".concat(dataId, "_dropbox")
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
       }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {

package/lib/v1/MultiSelect/SelectedOptions.js

@@ -66,7 +66,8 @@ var SelectedOptions = /*#__PURE__*/function (_React$PureComponent) {
           onRemove = _this$props.onRemove,
           onSelect = _this$props.onSelect,
           size = _this$props.size,
-          palette = _this$props.palette;
+          palette = _this$props.palette,
+          dataId = _this$props.dataId;
       var isDarkPalette = palette === 'dark' ? 'dark' : 'danger';
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, selectedOptions.map(function (option) {
         var id = option.id,
@@ -91,7 +92,8 @@ var SelectedOptions = /*#__PURE__*/function (_React$PureComponent) {
         if (optionType === 'avatar') {
           return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
             className: "".concat(_SelectedOptionsModule["default"].tag, " ").concat(_SelectedOptionsModule["default"][size]),
-            key: "".concat(id, "photoTag")
+            key: "".concat(id, "photoTag"),
+            dataId: dataId
           }, /*#__PURE__*/_react["default"].createElement(_Tag["default"], _extends({}, commonProps, {
             active: highLightedSelectOptions.indexOf(id) >= 0,
             hasAvatar: true,
@@ -100,7 +102,8 @@ var SelectedOptions = /*#__PURE__*/function (_React$PureComponent) {
         } else if (optionType === 'icon') {
           return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
             className: "".concat(_SelectedOptionsModule["default"].tag, " ").concat(_SelectedOptionsModule["default"][size]),
-            key: "".concat(id, "iconTag")
+            key: "".concat(id, "iconTag"),
+            dataId: dataId
           }, /*#__PURE__*/_react["default"].createElement(_Tag["default"], _extends({}, commonProps, {
             active: highLightedSelectOptions.indexOf(id) >= 0,
             iconName: icon,
@@ -110,7 +113,8 @@ var SelectedOptions = /*#__PURE__*/function (_React$PureComponent) {
 
         return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: "".concat(_SelectedOptionsModule["default"].tag, " ").concat(_SelectedOptionsModule["default"][size]),
-          key: "".concat(id, "tag")
+          key: "".concat(id, "tag"),
+          dataId: dataId
         }, /*#__PURE__*/_react["default"].createElement(_Tag["default"], _extends({}, commonProps, {
           active: highLightedSelectOptions.indexOf(id) >= 0
         })));

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

@@ -163,7 +163,8 @@ var MultiSelectWithAvatar_defaultProps = {
 };
 exports.MultiSelectWithAvatar_defaultProps = MultiSelectWithAvatar_defaultProps;
 var SelectedOptions_defaultProps = {
-  size: 'medium'
+  size: 'medium',
+  dataId: 'selectedOptions'
 };
 exports.SelectedOptions_defaultProps = SelectedOptions_defaultProps;
 var Suggestions_defaultProps = {

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

@@ -160,7 +160,8 @@ var SelectedOptions_propTypes = {
     optionType: _propTypes["default"].string
   })),
   size: _propTypes["default"].oneOf(['medium', 'xmedium']),
-  palette: _propTypes["default"].string
+  palette: _propTypes["default"].string,
+  dataId: _propTypes["default"].string
 };
 exports.SelectedOptions_propTypes = SelectedOptions_propTypes;
 var Suggestions_propTypes = {

package/lib/v1/Select/SelectWithAvatar.js

@@ -258,7 +258,8 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
         size: tagSize
       })) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
-        className: _MultiSelectModule["default"].textBox
+        className: _MultiSelectModule["default"].textBox,
+        dataId: "".concat(dataId, "_textBox")
       }, /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
         a11y: {
           ariaActivedescendant: selectedId,
@@ -304,7 +305,8 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           needResponsive: needResponsive,
           isPadding: false,
           isResponsivePadding: true,
-          alignBox: "row"
+          alignBox: "row",
+          dataId: "".concat(dataId, "_dropbox")
         }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           align: "both",
           className: _MultiSelectModule["default"].loader
@@ -342,6 +344,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
             role: 'heading'
           }
         })) : null, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+          dataId: "".concat(dataId, "_Options"),
           activeId: selectedId,
           suggestions: suggestions,
           getRef: _this2.suggestionItemRef,

package/lib/v1/Select/SelectWithIcon.js

@@ -442,7 +442,8 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: iconName,
         size: iconSize,
-        iconClass: iconClass
+        iconClass: iconClass,
+        dataId: "".concat(dataId, "_icon")
       })) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
       }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
@@ -533,7 +534,8 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
         }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
           customClass: "".concat(tabletMode ? _SelectModule["default"].responsivedropBoxList : _SelectModule["default"].dropBoxList, " ").concat(!tabletMode && dropBoxSize ? _SelectModule["default"][dropBoxSize] : ''),
           shrink: true,
-          eleRef: _this5.scrollContentRef
+          eleRef: _this5.scrollContentRef,
+          dataId: "".concat(dataId, "_Options")
         }, options.length ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, options.map(function (options, i) {
           var iconName = options.iconName,
               iconSize = options.iconSize,

package/lib/v1/Tab/Tabs.js

@@ -438,7 +438,8 @@ var Tabs = function Tabs(props) {
         getTargetRef = props.getTargetRef,
         position = props.position,
         customProps = props.customProps,
-        getCustomDropBoxHeaderPlaceHolder = props.getCustomDropBoxHeaderPlaceHolder;
+        getCustomDropBoxHeaderPlaceHolder = props.getCustomDropBoxHeaderPlaceHolder,
+        dataId = props.dataId;
     var _customProps$DropBoxP = customProps.DropBoxProps,
         DropBoxProps = _customProps$DropBoxP === void 0 ? {} : _customProps$DropBoxP,
         _customProps$ListItem = customProps.ListItemProps,
@@ -510,13 +511,15 @@ var Tabs = function Tabs(props) {
       }, DropBoxProps, {
         isResponsivePadding: true,
         needFocusScope: true,
-        onClose: togglePopupLocal
+        onClose: togglePopupLocal,
+        dataId: "".concat(dataId, "_dropbox")
       }), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(props), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         shrink: true,
         scroll: "vertical",
         className: "".concat(tabletMode ? '' : _v1TabsModule["default"].menuBox, " ").concat(moreBoxClass),
-        onScroll: onScrollLocal
+        onScroll: onScrollLocal,
+        dataId: "".concat(dataId, "_Tabs")
       }, _react["default"].Children.map(moreTabs, function (child) {
         if (!child) {
           return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.2.35",
+  "version": "1.2.37",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -70,7 +70,7 @@
     "@zohodesk/a11y": "2.2.3",
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/hooks": "2.0.4",
-    "@zohodesk/icons": "1.0.45",
+    "@zohodesk/icons": "1.0.50",
     "@zohodesk/svg": "1.1.14",
     "@zohodesk/utils": "1.3.13",
     "@zohodesk/variables": "1.0.0",
@@ -85,7 +85,7 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.0.45",
+    "@zohodesk/icons": "1.0.50",
     "@zohodesk/variables": "1.0.0",
     "@zohodesk/svg": "1.1.14",
     "@zohodesk/virtualizer": "1.0.3",