@zohodesk/components 1.0.0-temp-202 → 1.0.0-temp-203

package/lib/common/reset.module.css

@@ -1,13 +1,13 @@
-*,
-:after,
-:before {
-  outline: 0;
-  box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-}
-html {
-  /*  Variable:Ignore  */
-  font-size: 16px;
-}
+*,
+:after,
+:before {
+  outline: 0;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+}
+html {
+  /*  Variable:Ignore  */
+  font-size: 16px;
+}

package/lib/common/transition.module.css

@@ -1,146 +1,146 @@
-.zoomInEnter,
-.zoomInLeave.zoomInLeaveActive {
-  opacity: 0;
-}.zoomInEnter, .zoomInLeave.zoomInLeaveActive {
-  transform: perspective(1px) scale(1.5) translateZ(0);
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-.zoomInEnter.zoomInEnterActive,
-.zoomInLeave {
-  opacity: 1;
-}
-.zoomInEnter.zoomInEnterActive, .zoomInLeave {
-  transform: perspective(1px) scale(1) translateZ(0);
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-.scaleInEnter,
-.scaleInLeave.scaleInLeaveActive {
-  opacity: 0;
-}
-
-.scaleInEnter, .scaleInLeave.scaleInLeaveActive {
-  transform: scale(0);
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-.scaleInEnter.scaleInEnterActive,
-.scaleInLeave {
-  opacity: 1;
-}
-.scaleInEnter.scaleInEnterActive, .scaleInLeave {
-  transform: scale(1);
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-.fadeInEnter,
-.fadeInLeave.fadeInLeaveActive {
-  opacity: 0;
-}
-
-.fadeInEnter, .fadeInLeave.fadeInLeaveActive {
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-.fadeInEnter.fadeInEnterActive,
-.fadeInLeave {
-  opacity: 1;
-}
-
-.fadeInEnter.fadeInEnterActive, .fadeInLeave {
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-.slideLeftEnter,
-.slideLeftLeave.slideLeftLeaveActive {
-  opacity: 0;
-}
-
-.slideLeftEnter, .slideLeftLeave.slideLeftLeaveActive {
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-[dir=ltr] .slideLeftEnter, [dir=ltr] .slideLeftLeave.slideLeftLeaveActive {
-  transform: translateX(110%);
-}
-
-[dir=rtl] .slideLeftEnter, [dir=rtl] .slideLeftLeave.slideLeftLeaveActive {
-  transform: translateX(-110%);
-}
-
-.slideLeftEnter.slideLeftEnterActive,
-.slideLeftLeave {
-  opacity: 1;
-}
-
-.slideLeftEnter.slideLeftEnterActive, .slideLeftLeave {
-  transform: translateX(0%);
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-.slideDownEnter,
-.slideDownLeave.slideDownLeaveActive {
-  opacity: 0;
-}
-
-.slideDownEnter, .slideDownLeave.slideDownLeaveActive {
-  transform: translateY(-100%);
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-.slideDownEnter.slideDownEnterActive,
-.slideDownLeave {
-  opacity: 1;
-}
-
-.slideDownEnter.slideDownEnterActive, .slideDownLeave {
-  transform: translateY(0%);
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-.skewInEnter,
-.skewInLeave.skewInLeaveActive {
-  opacity: 0;
-}
-
-.skewInEnter, .skewInLeave.skewInLeaveActive {
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-[dir=ltr] .skewInEnter, [dir=ltr] .skewInLeave.skewInLeaveActive {
-  transform: translate(100%, 100%) skew(72deg) scale(0) perspective(221px);
-}
-
-[dir=rtl] .skewInEnter, [dir=rtl] .skewInLeave.skewInLeaveActive {
-  transform: translate(-100%, 100%) skew(-72deg) scale(0) perspective(221px);
-}
-
-.skewInEnter.skewInEnterActive,
-.skewInLeave {
-  opacity: 1;
-}
-
-.skewInEnter.skewInEnterActive, .skewInLeave {
-  transform: translate(0, 0) skew(0deg) scale(1) perspective(221px);
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-.defaultEnter,
-.defaultLeave.defaultLeaveActive {
-  display: none;
-}
-.defaultEnter.defaultEnterActive,
-.defaultLeave {
-  display: block;
-}
+.zoomInEnter,
+.zoomInLeave.zoomInLeaveActive {
+  opacity: 0;
+}.zoomInEnter, .zoomInLeave.zoomInLeaveActive {
+  transform: perspective(1px) scale(1.5) translateZ(0);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+.zoomInEnter.zoomInEnterActive,
+.zoomInLeave {
+  opacity: 1;
+}
+.zoomInEnter.zoomInEnterActive, .zoomInLeave {
+  transform: perspective(1px) scale(1) translateZ(0);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.scaleInEnter,
+.scaleInLeave.scaleInLeaveActive {
+  opacity: 0;
+}
+
+.scaleInEnter, .scaleInLeave.scaleInLeaveActive {
+  transform: scale(0);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+.scaleInEnter.scaleInEnterActive,
+.scaleInLeave {
+  opacity: 1;
+}
+.scaleInEnter.scaleInEnterActive, .scaleInLeave {
+  transform: scale(1);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.fadeInEnter,
+.fadeInLeave.fadeInLeaveActive {
+  opacity: 0;
+}
+
+.fadeInEnter, .fadeInLeave.fadeInLeaveActive {
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.fadeInEnter.fadeInEnterActive,
+.fadeInLeave {
+  opacity: 1;
+}
+
+.fadeInEnter.fadeInEnterActive, .fadeInLeave {
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.slideLeftEnter,
+.slideLeftLeave.slideLeftLeaveActive {
+  opacity: 0;
+}
+
+.slideLeftEnter, .slideLeftLeave.slideLeftLeaveActive {
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+[dir=ltr] .slideLeftEnter, [dir=ltr] .slideLeftLeave.slideLeftLeaveActive {
+  transform: translateX(110%);
+}
+
+[dir=rtl] .slideLeftEnter, [dir=rtl] .slideLeftLeave.slideLeftLeaveActive {
+  transform: translateX(-110%);
+}
+
+.slideLeftEnter.slideLeftEnterActive,
+.slideLeftLeave {
+  opacity: 1;
+}
+
+.slideLeftEnter.slideLeftEnterActive, .slideLeftLeave {
+  transform: translateX(0%);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.slideDownEnter,
+.slideDownLeave.slideDownLeaveActive {
+  opacity: 0;
+}
+
+.slideDownEnter, .slideDownLeave.slideDownLeaveActive {
+  transform: translateY(-100%);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.slideDownEnter.slideDownEnterActive,
+.slideDownLeave {
+  opacity: 1;
+}
+
+.slideDownEnter.slideDownEnterActive, .slideDownLeave {
+  transform: translateY(0%);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.skewInEnter,
+.skewInLeave.skewInLeaveActive {
+  opacity: 0;
+}
+
+.skewInEnter, .skewInLeave.skewInLeaveActive {
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+[dir=ltr] .skewInEnter, [dir=ltr] .skewInLeave.skewInLeaveActive {
+  transform: translate(100%, 100%) skew(72deg) scale(0) perspective(221px);
+}
+
+[dir=rtl] .skewInEnter, [dir=rtl] .skewInLeave.skewInLeaveActive {
+  transform: translate(-100%, 100%) skew(-72deg) scale(0) perspective(221px);
+}
+
+.skewInEnter.skewInEnterActive,
+.skewInLeave {
+  opacity: 1;
+}
+
+.skewInEnter.skewInEnterActive, .skewInLeave {
+  transform: translate(0, 0) skew(0deg) scale(1) perspective(221px);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.defaultEnter,
+.defaultLeave.defaultLeaveActive {
+  display: none;
+}
+.defaultEnter.defaultEnterActive,
+.defaultLeave {
+  display: block;
+}

package/lib/semantic/Button/semanticButton.module.css

@@ -1,9 +1,9 @@
-.buttonReset {
-  outline: 0;
-  font: inherit;
-  color: inherit;
-  border: inherit;
-  background-color: inherit;
-  padding: 0 ;
-  text-align: inherit;
-}
+.buttonReset {
+  outline: 0;
+  font: inherit;
+  color: inherit;
+  border: inherit;
+  background-color: inherit;
+  padding: 0 ;
+  text-align: inherit;
+}

package/lib/v1/Avatar/Avatar.js

@@ -49,11 +49,11 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-/*
-1. need to change name into firstName lastName
-2. pattern support via context as well as props
-3. prop high priority to arrange firstName lastName
-4. team pass name as lastName and pass pattern via prop
+/*
+1. need to change name into firstName lastName
+2. pattern support via context as well as props
+3. prop high priority to arrange firstName lastName
+4. team pass name as lastName and pass pattern via prop
 */
 function Avatar(props) {
   var src = props.src,

package/lib/v1/AvatarTeam/AvatarTeam.js

@@ -19,10 +19,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-/* once avatar support firstname lastname and pattern
-pass lastName as team name and pattern ["FIRST_NAME","LAST_NAME"] as props
-
-Not going to export to external then can kept inside supportapp
+/* once avatar support firstname lastname and pattern
+pass lastName as team name and pattern ["FIRST_NAME","LAST_NAME"] as props
+
+Not going to export to external then can kept inside supportapp
 */
 function AvatarTeam(props) {
   var src = props.src,

package/lib/v1/Button/Button.js

@@ -21,10 +21,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-/*
-Button text and children props?
-use children for both cases
-toLowerCase check needed?
+/*
+Button text and children props?
+use children for both cases
+toLowerCase check needed?
 */
 function Button(props) {
   var text = props.text,

package/lib/v1/DateTime/DateWidget.js

@@ -1093,7 +1093,8 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         customProps: TextBoxProps
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "both",
-        onClick: isDisabled || isReadOnly ? null : this.handleDateIconClick
+        onClick: isDisabled || isReadOnly ? null : this.handleDateIconClick,
+        dataId: "".concat(dataId, "_datePicker")
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-datepicker",
         size: "12"

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

@@ -402,8 +402,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       if (suggestionsLen && isPopupOpen && keyCode === 38) {
         //up arrow
 
-        /*if (hoverOption === 0) { //disable first to last option higlight
-          !isNextOptions && this.setState({ hoverOption: suggestionsLen - 1 });
+        /*if (hoverOption === 0) { //disable first to last option higlight
+          !isNextOptions && this.setState({ hoverOption: suggestionsLen - 1 });
         }*/
         if (hoverOption) {
           this.setState({
@@ -413,9 +413,9 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       } else if (suggestionsLen && isPopupOpen && keyCode === 40) {
         //down arrow
 
-        /*else if (hoverOption === suggestionsLen - 1 || hoverOption === null) {
-          //disable last to first option higlight
-          !isNextOptions && this.setState({ hoverOption: 0 });
+        /*else if (hoverOption === suggestionsLen - 1 || hoverOption === null) {
+          //disable last to first option higlight
+          !isNextOptions && this.setState({ hoverOption: 0 });
         }*/
         if (isNextOptions && suggestionsLen >= 5 && hoverOption === suggestionsLen - 3) {
           getNextOptions && this.handleFetchOptions(getNextOptions, searchStr);
@@ -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,
@@ -1117,7 +1118,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         },
         size: boxSize,
         alignBox: "row",
-        isResponsivePadding: getFooter ? false : true
+        isResponsivePadding: getFooter ? false : true,
+        dataId: "".concat(dataId, "_dropbox")
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
       }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {

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 = {