@zohodesk/components 1.0.0-temp-220.9 → 1.0.0-temp-225-1

package/es/DropDown/DropDownSearch.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { DropDownSearch_propTypes } from "./props/propTypes";
-import { DropDownSearch_defaultProps } from "./props/defaultProps";
-import TextBox from "../TextBox/TextBox";
-import style from "./DropDownSearch.module.css";
+import { DropDownSearch_propTypes } from './props/propTypes';
+import { DropDownSearch_defaultProps } from './props/defaultProps';
+import TextBox from '../TextBox/TextBox';
+import style from './DropDownSearch.module.css';
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['dropdown', 'menu', 'shadow', 'target', 'header', 'headertext', 'list', 'padding', 'listHover', 'active', 'children', 'user', 'footer', separator, 'small', 'search', 'medium', 'heading', 'listGroup'] }] */
 
 export default class DropDownSearch extends React.Component {

package/es/DropDown/DropDownSeparator.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { DropDownSeparator_propTypes } from "./props/propTypes";
-import style from "./DropDownSeparator.module.css";
+import { DropDownSeparator_propTypes } from './props/propTypes';
+import style from './DropDownSeparator.module.css';
 export default class DropDownSeparator extends React.Component {
   render() {
     let {

package/es/DropDown/__tests__/DropDown.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import DropDown from "../DropDown";
+import DropDown from '../DropDown';
 describe('DropDown', () => {
   test('rendering the defult props', () => {
     const {

package/es/DropDown/__tests__/DropDownHeading.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import DropDownHeading from "../DropDownHeading";
+import DropDownHeading from '../DropDownHeading';
 describe('DropDownHeading', () => {
   test('rendering the defult props', () => {
     const {

package/es/DropDown/__tests__/DropDownItem.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import DropDownItem from "../DropDownItem";
+import DropDownItem from '../DropDownItem';
 describe('DropDownItem', () => {
   test('rendering the defult props', () => {
     const {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import DropDownSearch from "../DropDownSearch";
+import DropDownSearch from '../DropDownSearch';
 describe('DropDownSearch', () => {
   test('rendering the defult props', () => {
     const {

package/es/DropDown/__tests__/DropDownSeparator.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import DropDownSeparator from "../DropDownSeparator";
+import DropDownSeparator from '../DropDownSeparator';
 describe('DropDownSeparator', () => {
   test('rendering the defult props', () => {
     const {

package/es/DropDown/index.js

@@ -1,7 +1,7 @@
-export { default as DropDown } from "./DropDown";
-export { DropDownTarget } from "./DropDown";
-export { DropDownItemContainer } from "./DropDown";
-export { default as DropDownHeading } from "./DropDownHeading";
-export { default as DropDownItem } from "./DropDownItem";
-export { default as DropDownSearch } from "./DropDownSearch";
-export { default as DropDownSeparator } from "./DropDownSeparator";
+export { default as DropDown } from './DropDown';
+export { DropDownTarget } from './DropDown';
+export { DropDownItemContainer } from './DropDown';
+export { default as DropDownHeading } from './DropDownHeading';
+export { default as DropDownItem } from './DropDownItem';
+export { default as DropDownSearch } from './DropDownSearch';
+export { default as DropDownSeparator } from './DropDownSeparator';

package/es/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 = {

package/es/Heading/Heading.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import { whiteSpaceClassMapping } from "../utils/cssUtils";
-import style from "./Heading.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { whiteSpaceClassMapping } from '../utils/cssUtils';
+import style from './Heading.module.css';
 export default class Heading extends React.Component {
   render() {
     let {

package/es/Heading/__tests__/Heading.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Heading from "../Heading";
+import Heading from '../Heading';
 describe('Heading', () => {
   test('rendering the defult props', () => {
     const {

package/es/Label/Label.js

@@ -2,10 +2,10 @@
   'small', 'medium', 'large', 'title', 'subtitle', 'default', 'primary', 'secondary', 'danger', 'mandatory'
 ]}] */
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import style from "./Label.module.css";
-import colors from "./LabelColors.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from './Label.module.css';
+import colors from './LabelColors.module.css';
 export default class Label extends React.Component {
   render() {
     let {

package/es/Label/__tests__/Label.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Label from "../Label.js";
+import Label from '../Label.js';
 describe('Label', () => {
   test('rendering the defult props', () => {
     const {

package/es/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 "./utils";
-import style from "./Layout.module.css";
+import { createProps, getClass, setProps } from './utils';
+import style from './Layout.module.css';
 /* eslint-disable  react/no-unused-prop-types*/
 
 function getBoxClassNames(props) {

package/es/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 "./utils";
-import style from "./Layout.module.css";
+import { createProps, getClass, setProps } from './utils';
+import style from './Layout.module.css';
 /* eslint-disable  react/no-unused-prop-types*/
 
 function getContainerClassNames(props) {

package/es/Layout/__tests__/Box.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Box from "../Box";
+import Box from '../Box';
 describe('Box', () => {
   test('rendering the defult props', () => {
     const {

package/es/Layout/__tests__/Container.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Container from "../Container";
+import Container from '../Container';
 describe('Container', () => {
   test('rendering the defult props', () => {
     const {

package/es/Layout/index.js

@@ -1,5 +1,5 @@
-export { default as Container } from "./Container";
-export { default as Box } from "./Box"; // let Layout = {
+export { default as Container } from './Container';
+export { default as Box } from './Box'; // let Layout = {
 //   docs: {
 //     componentGroup: 'Layout',
 //     folderName: 'Style Guide',

package/es/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.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.module.css';
+import { ListContainerDefaultProps } from './props/defaultProps';
+import { ListContainer_Props } from './props/propTypes';
+import { useResponsiveReceiver } from '../Responsive/CustomResponsive';
 
 const ListContainer = props => {
   const {

package/es/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 { Container, 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.module.css";
+import style from './ListItem.module.css';
 export default class ListItem extends React.Component {
   constructor(props) {
     super(props);
@@ -70,7 +70,8 @@ export default class ListItem extends React.Component {
       a11y,
       customClass,
       customProps,
-      needMultiLineText
+      needMultiLineText,
+      secondaryValue
     } = this.props;
     let {
       ListItemProps = {},
@@ -113,6 +114,11 @@ export default class ListItem extends React.Component {
       eleRef: this.getRef,
       customProps: ListItemProps,
       ...ContainerProps
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      className: style.leftBox
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.titleBox
     }, value ? /*#__PURE__*/React.createElement(Box, {
       shrink: true,
       adjust: true,
@@ -121,7 +127,10 @@ export default class ListItem extends React.Component {
       shrink: true,
       adjust: true,
       className: style.children
-    }, children) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
+    }, children) : null), secondaryValue ? /*#__PURE__*/React.createElement(Box, {
+      "data-title": isDisabled ? null : secondaryValue,
+      className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : style.secondaryValue}`
+    }, secondaryValue) : null), needTick && active ? /*#__PURE__*/React.createElement(Box, {
       className: `${style.tickIcon} ${tickIconPalette} ${customTickIcon}`,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,

package/es/ListItem/ListItem.module.css

@@ -250,3 +250,12 @@
   padding-top: var(--zd_size10) ;
   padding-bottom: var(--zd_size10) ;
 }
+
+
+.leftBox {
+  composes: dflex flexcolumn from '../common/common.module.css';
+}
+
+.titleBox {
+  composes: dflex alignVertical from '../common/common.module.css';
+}

package/es/ListItem/ListItemWithAvatar.js

@@ -1,17 +1,17 @@
 /**** Libraries ****/
 import React from 'react';
-import { Box, Container } from "../Layout";
-import ListContainer from "./ListContainer";
-import { ListItemWithAvatarDefaultProps } from "./props/defaultProps";
-import { ListItemWithAvatar_Props } from "./props/propTypes";
+import { Box, Container } 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.module.css";
+import style from './ListItem.module.css';
 export default class ListItemWithAvatar extends React.PureComponent {
   constructor(props) {
     super(props);

package/es/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, Container } from "../Layout";
-import style from "./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, Container } from '../Layout';
+import style from './ListItem.module.css';
 export default class ListItemWithCheckBox extends React.Component {
   constructor(props) {
     super(props);

package/es/ListItem/ListItemWithIcon.js

@@ -1,13 +1,13 @@
 /**** Libraries ****/
 import React from 'react';
-import { Box, Container } from "../Layout";
+import { Box, Container } 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.module.css";
+import style from './ListItem.module.css';
 export default class ListItemWithIcon extends React.Component {
   constructor(props) {
     super(props);

package/es/ListItem/ListItemWithRadio.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import Radio from "../Radio/Radio";
-import { Box, Container } from "../Layout";
-import ListContainer from "./ListContainer";
-import { ListItemWithRadioDefaultProps } from "./props/defaultProps";
-import { ListItemWithRadio_Props } from "./props/propTypes";
-import style from "./ListItem.module.css";
+import Radio from '../Radio/Radio';
+import { Box, Container } from '../Layout';
+import ListContainer from './ListContainer';
+import { ListItemWithRadioDefaultProps } from './props/defaultProps';
+import { ListItemWithRadio_Props } from './props/propTypes';
+import style from './ListItem.module.css';
 export default class ListItemWithRadio extends React.Component {
   constructor(props) {
     super(props);

package/es/ListItem/__tests__/ListContainer.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import ListContainer from "../ListContainer";
+import ListContainer from '../ListContainer';
 describe('ListContainer', () => {
   test('rendering the defult props', () => {
     const {

package/es/ListItem/__tests__/ListItem.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import ListItem from "../ListItem";
+import ListItem from '../ListItem';
 describe('ListItem', () => {
   test('rendering the defult props', () => {
     const {

package/es/ListItem/__tests__/ListItemWithAvatar.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import ListItemWithAvatar from "../ListItemWithAvatar";
+import ListItemWithAvatar from '../ListItemWithAvatar';
 describe('ListItemWithAvatar', () => {
   test('rendering the defult props', () => {
     const {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import ListItemWithCheckBox from "../ListItemWithCheckBox";
+import ListItemWithCheckBox from '../ListItemWithCheckBox';
 describe('ListItemWithCheckBox', () => {
   test('rendering the defult props', () => {
     const {

package/es/ListItem/__tests__/ListItemWithIcon.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import ListItemWithIcon from "../ListItemWithIcon";
+import ListItemWithIcon from '../ListItemWithIcon';
 describe('ListItemWithIcon', () => {
   test('rendering the defult props', () => {
     const {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import ListItemWithRadio from "../ListItemWithRadio";
+import ListItemWithRadio from '../ListItemWithRadio';
 describe('ListItemWithRadio', () => {
   test('rendering the defult props', () => {
     const {

package/es/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/ListItem/props/propTypes.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
-import { propTypes as AvatarProps } from "../../Avatar/props/propTypes.js";
-import { propTypes as AvatarTeamProps } from "../../AvatarTeam/props/propTypes.js";
+import { propTypes as AvatarProps } from '../../Avatar/props/propTypes.js';
+import { propTypes as AvatarTeamProps } from '../../AvatarTeam/props/propTypes.js';
 export const ListContainer_Props = {
   active: PropTypes.bool,
   autoHover: PropTypes.bool,
@@ -64,7 +64,8 @@ export const ListItem_Props = {
   }),
   customProps: PropTypes.shape({
     ListItemProps: PropTypes.object
-  })
+  }),
+  secondaryValue: PropTypes.string
 };
 export const ListItemWithAvatar_Props = {
   active: PropTypes.bool,

package/es/Modal/Modal.js

@@ -1,10 +1,9 @@
 /**** Libraries ****/
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import Portal from "./Portal/Portal";
-import { getLibraryConfig } from "../Provider/Config";
-import style from "../AppContainer/AppContainer.module.css";
+import ReactDOM from 'react-dom';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from '../AppContainer/AppContainer.module.css';
 let createdPortalIds = [];
 let newPortalPrefix = 'CPortal';
 let portalChildrenTopIndexValues;
@@ -14,13 +13,10 @@ export default class Modal extends React.Component {
     this.handleAddPortalId = this.handleAddPortalId.bind(this);
     this.handleRemovePortalId = this.handleRemovePortalId.bind(this);
     this.handleInsertPortalDiv = this.handleInsertPortalDiv.bind(this);
-    this.setPortalDiv = this.setPortalDiv.bind(this);
-    this.getRootElement = this.getRootElement.bind(this);
-    this.getPortalPrefix = this.getPortalPrefix.bind(this);
+    this.getPortalDiv = this.getPortalDiv.bind(this);
     this.state = {
       isMounted: false
     };
-    this.portalPrefix = this.getPortalPrefix();
     this.portalId = props.portalId;
     this.setRef = this.setRef.bind(this);
     this.ref = null; // this.portalDiv = document.createDocumentFragment();
@@ -35,40 +31,24 @@ export default class Modal extends React.Component {
     }
   }
 
-  getRootElement() {
-    const getRootElement = getLibraryConfig('getRootElement');
+  getPortalDiv() {
+    this.modalRoot = this.props.portalId ? document.querySelector(`[data-portal=${this.props.portalId}]`) : '';
 
-    if (getRootElement && typeof getRootElement === 'function') {
-      const parent = getRootElement();
-
-      if (parent) {
-        return parent;
-      }
-    }
-
-    return null;
-  }
-
-  getPortalPrefix() {
-    const portalPrefix = getLibraryConfig('portalPrefix');
-    return portalPrefix !== '' ? portalPrefix : '';
-  }
-
-  setPortalDiv() {
-    const modalRoot = this.props.portalId ? document.querySelector(`[data-portal=${this.portalPrefix}${this.props.portalId}]`) : '';
-
-    if (!modalRoot) {
+    if (!this.modalRoot) {
       this.portalId = this.handleAddPortalId();
       this.newModalRoot = document.createElement('div');
       this.newModalRoot.className = style.container;
-      this.newModalRoot.setAttribute('data-portal', `${this.portalPrefix}${this.portalId}`);
+      this.newModalRoot.setAttribute('data-portal', this.portalId);
       this.containerDiv && this.containerDiv.appendChild(this.newModalRoot);
+      this.modalRoot = this.newModalRoot;
     }
+
+    return this.modalRoot;
   }
 
   componentDidMount() {
-    this.containerDiv = this.getRootElement() || document.getElementsByTagName('desk')[0] || document.getElementsByTagName('body')[0];
-    this.setPortalDiv();
+    this.containerDiv = document.getElementsByTagName('desk')[0] ? document.getElementsByTagName('desk')[0] : document.getElementsByTagName('body')[0];
+    this.portalDiv = this.getPortalDiv();
     this.setState({
       isMounted: true
     }, () => {
@@ -77,6 +57,7 @@ export default class Modal extends React.Component {
   }
 
   componentWillUnmount() {
+    //this.modalRoot && this.modalRoot.removeChild(this.portalDiv);
     if (this.newModalRoot) {
       this.containerDiv && this.containerDiv.removeChild(this.newModalRoot);
       this.handleRemovePortalId();
@@ -148,12 +129,10 @@ export default class Modal extends React.Component {
 
     if (isMounted) {
       if (Element) {
-        return /*#__PURE__*/React.createElement(Portal, {
-          portalId: this.portalId
-        }, /*#__PURE__*/React.createElement(Element, {
+        return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(Element, {
           ref: this.setRef,
           ...elementProps
-        }));
+        }), this.portalDiv);
       }
 
       return null;

package/es/Modal/__tests__/Modal.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Modal from "../Modal";
+import Modal from '../Modal';
 describe('Modal', () => {
   test('rendering the defult props', () => {
     const {

package/es/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 "../MultiSelect/MultiSelectHeader";
-import SelectedOptions from "../MultiSelect/SelectedOptions";
-import Suggestions from "../MultiSelect/Suggestions";
-import EmptyState from "../MultiSelect/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 '../MultiSelect/MultiSelectHeader';
+import SelectedOptions from '../MultiSelect/SelectedOptions';
+import Suggestions from '../MultiSelect/Suggestions';
+import EmptyState from '../MultiSelect/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.module.css";
+import style from './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 */