@zohodesk/components 1.2.35 → 1.2.37

package/es/v1/DropBox/DropBox.js

@@ -1,14 +1,14 @@
 import React, { useRef, useContext } from 'react';
 import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
-import Modal from '../Modal/Modal';
-import LibraryContext from '../../Provider/LibraryContextInit';
-import cssJSLogic from '../../DropBox/css/cssJSLogic';
-import DropBoxElement from './DropBoxElement/DropBoxElement';
-import { DropBoxDefaultProps } from './props/defaultProps';
-import { DropBoxPropTypes } from './props/propTypes';
-import { stopPropagation } from '../../utils/Common';
-import isMobilePopover from './utils/isMobilePopover';
-import style from '../../DropBox/css/DropBox.module.css';
+import Modal from "../Modal/Modal";
+import LibraryContext from "../../Provider/LibraryContextInit";
+import cssJSLogic from "../../DropBox/css/cssJSLogic";
+import DropBoxElement from "./DropBoxElement/DropBoxElement";
+import { DropBoxDefaultProps } from "./props/defaultProps";
+import { DropBoxPropTypes } from "./props/propTypes";
+import { stopPropagation } from "../../utils/Common";
+import isMobilePopover from "./utils/isMobilePopover";
+import style from "../../DropBox/css/DropBox.module.css";
 export default function DropBox(props) {
   const dropBoxRef = useRef(null);
   const DropBoxContext = useContext(LibraryContext);

package/es/v1/DropBox/DropBoxElement/DropBoxElement.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import useDropboxPosCalc from '../../../DropBox/DropBoxElement/useDropboxPosCalc';
-import cssJSLogic from '../../../DropBox/DropBoxElement/css/cssJSLogic';
-import { positionMapping } from '../../../DropBox/DropBoxPositionMapping.json';
-import { DropBoxElementDefaultProps } from './props/defaultProps';
-import { DropBoxElementPropTypes } from './props/propTypes';
+import useDropboxPosCalc from "../../../DropBox/DropBoxElement/useDropboxPosCalc";
+import cssJSLogic from "../../../DropBox/DropBoxElement/css/cssJSLogic";
+import { positionMapping } from "../../../DropBox/DropBoxPositionMapping.json";
+import { DropBoxElementDefaultProps } from "./props/defaultProps";
+import { DropBoxElementPropTypes } from "./props/propTypes";
 import { mergeStyle } from '@zohodesk/utils';
-import style from '../../../DropBox/DropBoxElement/css/DropBoxElement.module.css';
+import style from "../../../DropBox/DropBoxElement/css/DropBoxElement.module.css";
 export default function DropBoxElement(props) {
   let {
     children,

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

@@ -1,4 +1,4 @@
-import { DropBoxElementDefaultProps } from '../DropBoxElement/props/defaultProps';
+import { DropBoxElementDefaultProps } from "../DropBoxElement/props/defaultProps";
 export const defaultProps = {
   needResponsive: true,
   portalId: 'portal1',

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

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { DropBoxElementPropTypes } from '../DropBoxElement/props/propTypes';
+import { DropBoxElementPropTypes } from "../DropBoxElement/props/propTypes";
 export const propTypes = {
   needResponsive: PropTypes.bool,
   portalId: PropTypes.string,

package/es/v1/DropBox/utils/isMobilePopover.js

@@ -1,4 +1,4 @@
-import { getLibraryConfig } from '../../../Provider/Config';
+import { getLibraryConfig } from "../../../Provider/Config";
 export default function isMobilePopover(needResponsive) {
   //   let { needResponsive } = props;
   let windowWidth,

package/es/v1/DropDown/DropDown.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { DropDown_propTypes, DropDownTarget_propTypes, DropDownContainer_propTypes, DropDownItemContainer_propTypes } from './props/propTypes';
-import { DropDownItemContainer_defaultProps } from './props/defaultProps';
-import style from '../../DropDown/DropDown.module.css';
-import PopOver, { PopOverTarget, PopOverContainer } from '../PopOver/PopOver';
+import { DropDown_propTypes, DropDownTarget_propTypes, DropDownContainer_propTypes, DropDownItemContainer_propTypes } from "./props/propTypes";
+import { DropDownItemContainer_defaultProps } from "./props/defaultProps";
+import style from "../../DropDown/DropDown.module.css";
+import PopOver, { PopOverTarget, PopOverContainer } from "../PopOver/PopOver";
 export default function DropDown(props) {
   let {
     children

package/es/v1/DropDown/DropDownHeading.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { DropDownHeading_propTypes } from './props/propTypes';
-import { DropDownHeading_defaultProps } from './props/defaultProps';
-import style from '../../DropDown/DropDownHeading.module.css';
+import { DropDownHeading_propTypes } from "./props/propTypes";
+import { DropDownHeading_defaultProps } from "./props/defaultProps";
+import style from "../../DropDown/DropDownHeading.module.css";
 export default function DropDownHeading(props) {
   let {
     text,

package/es/v1/DropDown/DropDownItem.js

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
-import { DropDownItem_propTypes } from './props/propTypes';
-import { DropDownItem_defaultProps } from './props/defaultProps';
-import style from '../../DropDown/DropDownItem.module.css';
+import { DropDownItem_propTypes } from "./props/propTypes";
+import { DropDownItem_defaultProps } from "./props/defaultProps";
+import style from "../../DropDown/DropDownItem.module.css";
 export default function DropDownItem(props) {
   let {
     value,

package/es/v1/DropDown/DropDownSearch.js

@@ -1,8 +1,8 @@
 import React, { useEffect, useRef } from 'react';
-import { DropDownSearch_propTypes } from './props/propTypes';
-import { DropDownSearch_defaultProps } from './props/defaultProps';
-import TextBox from '../TextBox/TextBox';
-import style from '../../DropDown/DropDownSearch.module.css';
+import { DropDownSearch_propTypes } from "./props/propTypes";
+import { DropDownSearch_defaultProps } from "./props/defaultProps";
+import TextBox from "../TextBox/TextBox";
+import style from "../../DropDown/DropDownSearch.module.css";
 export default function DropDownSearch(props) {
   let {
     name,
@@ -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/DropDownSeparator.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { DropDownSeparator_propTypes } from './props/propTypes';
-import style from '../../DropDown/DropDownSeparator.module.css';
+import { DropDownSeparator_propTypes } from "./props/propTypes";
+import style from "../../DropDown/DropDownSeparator.module.css";
 export default function DropDownSeparator(props) {
   let {
     customClass = ''

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

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { PopOver_propTypes } from './../../PopOver/props/propTypes';
+import { PopOver_propTypes } from "./../../PopOver/props/propTypes";
 export const DropDown_propTypes = { ...PopOver_propTypes
 };
 export const DropDownTarget_propTypes = {
@@ -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/Heading/Heading.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import style from '../../Heading/Heading.module.css';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import style from "../../Heading/Heading.module.css";
 export default function Heading(props) {
   let {
     tagName,

package/es/v1/Label/Label.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import style from '../../Label/Label.module.css';
-import colors from '../../Label/LabelColors.module.css';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import style from "../../Label/Label.module.css";
+import colors from "../../Label/LabelColors.module.css";
 export default function Label(props) {
   const {
     text,

package/es/v1/Layout/Box.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { BoxProps as propTypes } from './props/propTypes';
-import { BoxDefaultProps as defaultProps } from './props/defaultProps';
+import { BoxProps as propTypes } from "./props/propTypes";
+import { BoxDefaultProps as defaultProps } from "./props/defaultProps";
 /* eslint css-modules/no-unused-class: 0 */
 
-import { createProps, getClass, setProps } from '../../Layout/utils';
-import style from '../../Layout/Layout.module.css';
+import { createProps, getClass, setProps } from "../../Layout/utils";
+import style from "../../Layout/Layout.module.css";
 /* eslint-disable  react/no-unused-prop-types*/
 
 function getBoxClassNames(props) {

package/es/v1/Layout/Container.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { ContainerProps as propTypes } from './props/propTypes';
-import { ContainerDefaultProps as defaultProps } from './props/defaultProps';
+import { ContainerProps as propTypes } from "./props/propTypes";
+import { ContainerDefaultProps as defaultProps } from "./props/defaultProps";
 /* eslint css-modules/no-unused-class: 0 */
 
-import { createProps, getClass, setProps } from '../../Layout/utils';
-import style from '../../Layout/Layout.module.css';
+import { createProps, getClass, setProps } from "../../Layout/utils";
+import style from "../../Layout/Layout.module.css";
 /* eslint-disable  react/no-unused-prop-types*/
 
 function getContainerClassNames(props) {

package/es/v1/Layout/index.js

@@ -1,2 +1,2 @@
-export { default as Container } from './Container';
-export { default as Box } from './Box';
+export { default as Container } from "./Container";
+export { default as Box } from "./Box";

package/es/v1/ListItem/ListContainer.js

@@ -1,11 +1,11 @@
 /**** Libraries ****/
 import React, { useCallback } from 'react';
-import { Container } from '../Layout';
-import CssProvider from '../../Provider/CssProvider';
-import style from '../../ListItem/ListItem.module.css';
-import { ListContainerDefaultProps } from './props/defaultProps';
-import { ListContainer_Props } from './props/propTypes';
-import { useResponsiveReceiver } from '../../Responsive/CustomResponsive';
+import { Container } from "../Layout";
+import CssProvider from "../../Provider/CssProvider";
+import style from "../../ListItem/ListItem.module.css";
+import { ListContainerDefaultProps } from "./props/defaultProps";
+import { ListContainer_Props } from "./props/propTypes";
+import { useResponsiveReceiver } from "../../Responsive/CustomResponsive";
 
 const ListContainer = props => {
   const {

package/es/v1/ListItem/ListItem.js

@@ -1,15 +1,15 @@
 /**** Libraries ****/
 import React from 'react';
-import { Box } from '../Layout';
-import ListContainer from './ListContainer';
-import { ListItemDefaultProps } from './props/defaultProps';
-import { ListItem_Props } from './props/propTypes';
+import { Box } from "../Layout";
+import ListContainer from "./ListContainer";
+import { ListItemDefaultProps } from "./props/defaultProps";
+import { ListItem_Props } from "./props/propTypes";
 /**** Components ****/
 
 import { Icon } from '@zohodesk/icons';
 /**** CSS ****/
 
-import style from '../../ListItem/ListItem.module.css';
+import style from "../../ListItem/ListItem.module.css";
 
 const ListItem = props => {
   let {

package/es/v1/ListItem/ListItemWithAvatar.js

@@ -1,17 +1,17 @@
 /**** Libraries ****/
 import React, { memo } from 'react';
-import { Box } from '../Layout';
-import ListContainer from './ListContainer';
-import { ListItemWithAvatarDefaultProps } from './props/defaultProps';
-import { ListItemWithAvatar_Props } from './props/propTypes';
+import { Box } from "../Layout";
+import ListContainer from "./ListContainer";
+import { ListItemWithAvatarDefaultProps } from "./props/defaultProps";
+import { ListItemWithAvatar_Props } from "./props/propTypes";
 /**** Components ****/
 
-import Avatar from '../Avatar/Avatar';
-import AvatarTeam from '../AvatarTeam/AvatarTeam';
+import Avatar from "../Avatar/Avatar";
+import AvatarTeam from "../AvatarTeam/AvatarTeam";
 import { Icon } from '@zohodesk/icons';
 /**** CSS ****/
 
-import style from '../../ListItem/ListItem.module.css';
+import style from "../../ListItem/ListItem.module.css";
 
 const ListItemWithAvatar = props => {
   let {

package/es/v1/ListItem/ListItemWithCheckBox.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import ListContainer from './ListContainer';
-import { ListItemWithCheckBoxDefaultProps } from './props/defaultProps';
-import { ListItemWithCheckBox_Props } from './props/propTypes';
-import CheckBox from '../CheckBox/CheckBox';
-import { Box } from '../Layout';
-import style from '../../ListItem/ListItem.module.css';
+import ListContainer from "./ListContainer";
+import { ListItemWithCheckBoxDefaultProps } from "./props/defaultProps";
+import { ListItemWithCheckBox_Props } from "./props/propTypes";
+import CheckBox from "../CheckBox/CheckBox";
+import { Box } from "../Layout";
+import style from "../../ListItem/ListItem.module.css";
 
 const ListItemWithCheckBox = props => {
   let {
@@ -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/ListItemWithIcon.js

@@ -1,13 +1,13 @@
 /**** Libraries ****/
 import React from 'react';
-import { Box } from '../Layout';
+import { Box } from "../Layout";
 import { Icon } from '@zohodesk/icons';
-import ListContainer from './ListContainer';
-import { ListItemWithIconDefaultProps } from './props/defaultProps';
-import { ListItemWithIcon_Props } from './props/propTypes';
+import ListContainer from "./ListContainer";
+import { ListItemWithIconDefaultProps } from "./props/defaultProps";
+import { ListItemWithIcon_Props } from "./props/propTypes";
 /**** CSS ****/
 
-import style from '../../ListItem/ListItem.module.css';
+import style from "../../ListItem/ListItem.module.css";
 
 const ListItemWithIcon = props => {
   let {

package/es/v1/ListItem/ListItemWithRadio.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import Radio from '../Radio/Radio';
-import { Box } from '../Layout';
-import ListContainer from './ListContainer';
-import { ListItemWithRadioDefaultProps } from './props/defaultProps';
-import { ListItemWithRadio_Props } from './props/propTypes';
-import style from '../../ListItem/ListItem.module.css';
+import Radio from "../Radio/Radio";
+import { Box } from "../Layout";
+import ListContainer from "./ListContainer";
+import { ListItemWithRadioDefaultProps } from "./props/defaultProps";
+import { ListItemWithRadio_Props } from "./props/propTypes";
+import style from "../../ListItem/ListItem.module.css";
 
 const ListItemWithRadio = props => {
   let {
@@ -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/ListItem/index.js

@@ -1,6 +1,6 @@
-export { default as ListContainer } from './ListContainer';
-export { default as ListItem } from './ListItem';
-export { default as ListItemWithAvatar } from './ListItemWithAvatar';
-export { default as ListItemWithCheckBox } from './ListItemWithCheckBox';
-export { default as ListItemWithIcon } from './ListItemWithIcon';
-export { default as ListItemWithRadio } from './ListItemWithRadio';
+export { default as ListContainer } from "./ListContainer";
+export { default as ListItem } from "./ListItem";
+export { default as ListItemWithAvatar } from "./ListItemWithAvatar";
+export { default as ListItemWithCheckBox } from "./ListItemWithCheckBox";
+export { default as ListItemWithIcon } from "./ListItemWithIcon";
+export { default as ListItemWithRadio } from "./ListItemWithRadio";

package/es/v1/Modal/Modal.js

@@ -1,9 +1,9 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import ReactDOM from 'react-dom';
 import useEffectCallOnlyAfterState from '@zohodesk/hooks/es/utils/useEffectCallOnlyAfterState';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import style from '../../AppContainer/AppContainer.module.css';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import style from "../../AppContainer/AppContainer.module.css";
 let createdPortalIds = [];
 let newPortalPrefix = 'CPortal';
 let portalChildrenTopIndexValues;

package/es/v1/MultiSelect/AdvancedGroupMultiSelect.js

@@ -1,31 +1,31 @@
 import React from 'react';
-import { AdvancedGroupMultiSelect_propTypes } from './props/propTypes';
-import { AdvancedGroupMultiSelect_defaultProps } from './props/defaultProps';
+import { AdvancedGroupMultiSelect_propTypes } from "./props/propTypes";
+import { AdvancedGroupMultiSelect_defaultProps } from "./props/defaultProps";
 /**** Components ****/
 
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
-import Popup from '../Popup/Popup';
-import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
-import { Container, Box } from '../Layout';
-import DropDownHeading from '../DropDown/DropDownHeading';
-import MultiSelectHeader from './MultiSelectHeader';
-import SelectedOptions from './SelectedOptions';
-import Suggestions from './Suggestions';
-import EmptyState from './EmptyState';
-import Card, { CardContent, CardHeader, CardFooter } from '../Card/Card';
-import { getUniqueId } from '../../Provider/IdProvider';
-import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '../../Responsive/CustomResponsive';
+import Popup from "../Popup/Popup";
+import TextBoxIcon from "../TextBoxIcon/TextBoxIcon";
+import { Container, Box } from "../Layout";
+import DropDownHeading from "../DropDown/DropDownHeading";
+import MultiSelectHeader from "./MultiSelectHeader";
+import SelectedOptions from "./SelectedOptions";
+import Suggestions from "./Suggestions";
+import EmptyState from "./EmptyState";
+import Card, { CardContent, CardHeader, CardFooter } from "../Card/Card";
+import { getUniqueId } from "../../Provider/IdProvider";
+import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
+import { ResponsiveReceiver } from "../../Responsive/CustomResponsive";
 /**** Icons ****/
 
 import { Icon } from '@zohodesk/icons';
 /**** CSS ****/
 
-import style from '../../MultiSelect/MultiSelect.module.css';
+import style from "../../MultiSelect/MultiSelect.module.css";
 /**** Methods ****/
 
-import { debounce, scrollTo, getIsEmptyValue, getSearchString } from '../../utils/Common.js';
-import { makeGetMultiSelectSelectedOptions, makeGetGroupSelectOptions, optionIdGrouping, makeGetGroupSelectFilterSuggestions, makeGetOptionIdChange, extractOptionId, makeFormatOptions, makeObjectConcat } from '../../utils/dropDownUtils';
+import { debounce, scrollTo, getIsEmptyValue, getSearchString } from "../../utils/Common.js";
+import { makeGetMultiSelectSelectedOptions, makeGetGroupSelectOptions, optionIdGrouping, makeGetGroupSelectFilterSuggestions, makeGetOptionIdChange, extractOptionId, makeFormatOptions, makeObjectConcat } from "../../utils/dropDownUtils";
 /* eslint-disable react/forbid-component-props */
 
 /* eslint-disable react/no-unused-prop-types */
@@ -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

@@ -1,30 +1,30 @@
 /**** Libraries ****/
 import React from 'react';
-import { AdvancedMultiSelect_propTypes } from './props/propTypes';
-import { AdvancedMultiSelect_defaultProps } from './props/defaultProps';
+import { AdvancedMultiSelect_propTypes } from "./props/propTypes";
+import { AdvancedMultiSelect_defaultProps } from "./props/defaultProps";
 /**** Components ****/
 
-import { MultiSelectComponent } from './MultiSelect';
-import SelectedOptions from './SelectedOptions';
-import Suggestions from './Suggestions';
-import EmptyState from './EmptyState';
-import MultiSelectHeader from './MultiSelectHeader';
-import Popup from '../Popup/Popup';
-import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
-import { Container, Box } from '../Layout';
-import Card, { CardContent, CardHeader, CardFooter } from '../Card/Card';
+import { MultiSelectComponent } from "./MultiSelect";
+import SelectedOptions from "./SelectedOptions";
+import Suggestions from "./Suggestions";
+import EmptyState from "./EmptyState";
+import MultiSelectHeader from "./MultiSelectHeader";
+import Popup from "../Popup/Popup";
+import TextBoxIcon from "../TextBoxIcon/TextBoxIcon";
+import { Container, Box } from "../Layout";
+import Card, { CardContent, CardHeader, CardFooter } from "../Card/Card";
 import { Icon } from '@zohodesk/icons';
-import { getUniqueId } from '../../Provider/IdProvider';
-import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '../../Responsive/CustomResponsive';
+import { getUniqueId } from "../../Provider/IdProvider";
+import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
+import { ResponsiveReceiver } from "../../Responsive/CustomResponsive";
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
 /**** CSS ****/
 
-import style from '../../MultiSelect/MultiSelect.module.css';
+import style from "../../MultiSelect/MultiSelect.module.css";
 /**** Methods ****/
 
-import { getIsEmptyValue, getSearchString } from '../../utils/Common.js';
-import { filterSelectedOptions, makeGetIsShowClearIcon } from '../../utils/dropDownUtils';
+import { getIsEmptyValue, getSearchString } from "../../utils/Common.js";
+import { filterSelectedOptions, makeGetIsShowClearIcon } from "../../utils/dropDownUtils";
 /* eslint-disable react/sort-prop-types */
 
 /* eslint-disable react/no-unused-prop-types */
@@ -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/EmptyState.js

@@ -1,10 +1,10 @@
 /**** Libraries ****/
 import React from 'react';
-import { EmptyState_propTypes } from './props/propTypes';
-import { EmptyState_defaultProps } from './props/defaultProps';
+import { EmptyState_propTypes } from "./props/propTypes";
+import { EmptyState_defaultProps } from "./props/defaultProps";
 /**** CSS ****/
 
-import style from '../../MultiSelect/MultiSelect.module.css';
+import style from "../../MultiSelect/MultiSelect.module.css";
 export default class EmptyState extends React.PureComponent {
   render() {
     let {

package/es/v1/MultiSelect/MobileHeader/MobileHeader.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import Button from '../../Button/Button';
-import { Container, Box } from '../../Layout';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import style from '../../../MultiSelect/MobileHeader/MobileHeader.module.css';
+import Button from "../../Button/Button";
+import { Container, Box } from "../../Layout";
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import style from "../../../MultiSelect/MobileHeader/MobileHeader.module.css";
 export default function MobileHeader(props) {
   let {
     i18nKeys,