@zohodesk/components 1.6.22 → 1.6.23-exp-2

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -27,6 +27,7 @@ import { DUMMY_OBJECT } from "./../utils/Common";
 import { Icon } from '@zohodesk/icons';
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./MultiSelect.module.css";
 /**** Methods ****/
 
@@ -922,7 +923,7 @@ class AdvancedGroupMultiSelect extends React.Component {
     const isShowClearIcon = !isReadOnly && !isDisabled && selectedGroupOptions.length > 1;
     const isEditable = !(isReadOnly || isDisabled);
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
+      className: cn(`${style.wrapper} ${isDisabled ? style.disabled : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`),
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : null,
@@ -955,8 +956,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       adjust: true,
       shrink: true
     }, /*#__PURE__*/React.createElement("span", {
-      className: ` ${style.custmSpan} ${textBoxSize === 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} ${isShowClearIcon ? style.clearIconSpace : ''}
-              `
+      className: cn(` ${style.custmSpan} ${textBoxSize === 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} ${isShowClearIcon ? style.clearIconSpace : ''}
+              `)
     }, searchStr), /*#__PURE__*/React.createElement(TextBoxIcon, {
       isDisabled: isDisabled,
       inputRef: this.searchInputRef,
@@ -1052,7 +1053,7 @@ class AdvancedGroupMultiSelect extends React.Component {
       return /*#__PURE__*/React.createElement(React.Fragment, {
         key: groupId
       }, groupName && /*#__PURE__*/React.createElement("div", {
-        className: style.groupTitle
+        className: cn(style.groupTitle)
       }, /*#__PURE__*/React.createElement(DropDownHeading, {
         text: groupName,
         a11y: {
@@ -1084,11 +1085,11 @@ class AdvancedGroupMultiSelect extends React.Component {
       i18nKeys: i18nKeys,
       htmlId: ariaErrorId
     }), isNextOptions && /*#__PURE__*/React.createElement("div", {
-      className: style.loader
+      className: cn(style.loader)
     }, /*#__PURE__*/React.createElement(Loader, null)))) : /*#__PURE__*/React.createElement("div", {
-      className: style.loader
+      className: cn(style.loader)
     }, /*#__PURE__*/React.createElement(Loader, null)), getFooter ? isDataLoaded ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : /*#__PURE__*/React.createElement("div", {
-      className: style.loader
+      className: cn(style.loader)
     }, /*#__PURE__*/React.createElement(Loader, null)) : null)))) : null);
   }
 

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -23,6 +23,7 @@ import { ResponsiveReceiver } from "../Responsive/CustomResponsive";
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./MultiSelect.module.css";
 /**** Methods ****/
 
@@ -436,7 +437,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     const isEditable = !(isReadOnly || isDisabled);
     const isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${containerClass}`,
+      className: cn(`${style.wrapper} ${isDisabled ? style.disabled : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${containerClass}`),
       "data-id": dataIdMultiSelectComp,
       "data-test-id": dataIdMultiSelectComp,
       "data-title": isDisabled ? title : null,
@@ -467,8 +468,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       shrink: true,
       dataId: `${dataIdMultiSelectComp}_textBox`
     }, /*#__PURE__*/React.createElement("span", {
-      className: ` ${style.custmSpan} ${textBoxSize === 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} ${isShowClearIcon ? style.clearIconSpace : ''}
-              `
+      className: cn(` ${style.custmSpan} ${textBoxSize === 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} ${isShowClearIcon ? style.clearIconSpace : ''}
+              `)
     }, searchStr), /*#__PURE__*/React.createElement(TextBoxIcon, {
       isDisabled: isDisabled,
       inputRef: this.searchInputRef,

package/es/MultiSelect/EmptyState.js

@@ -6,6 +6,7 @@ import { EmptyState_defaultProps } from "./props/defaultProps";
 import { MULTISELECT_I18N_KEYS } from "./constants";
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./MultiSelect.module.css";
 export default class EmptyState extends React.PureComponent {
   render() {
@@ -36,13 +37,13 @@ export default class EmptyState extends React.PureComponent {
       role = 'alert'
     } = a11y;
     return /*#__PURE__*/React.createElement(React.Fragment, null, isLoading ? /*#__PURE__*/React.createElement("div", {
-      className: className,
+      className: cn(className),
       "data-id": `${dataId}_Loading`,
       "data-test-id": `${dataId}_Loading`,
       role: role,
       id: htmlId
     }, loadingText) : searchString.length && suggestions.length === 0 ? getCustomEmptyState ? getCustomEmptyState() : /*#__PURE__*/React.createElement("div", {
-      className: className,
+      className: cn(className),
       "data-id": `${dataId}_srchEmptyMsg`,
       "data-test-id": `${dataId}_srchEmptyMsg`,
       role: role,
@@ -54,7 +55,7 @@ export default class EmptyState extends React.PureComponent {
       htmlId,
       className
     }) : /*#__PURE__*/React.createElement("div", {
-      className: className,
+      className: cn(className),
       "data-id": `${dataId}_noOptnsMsg`,
       "data-test-id": `${dataId}_noOptnsMsg`,
       role: role,
@@ -66,7 +67,7 @@ export default class EmptyState extends React.PureComponent {
       htmlId,
       className
     }) : /*#__PURE__*/React.createElement("div", {
-      className: className,
+      className: cn(className),
       "data-id": `${dataId}_NoMoreOptionMsg`,
       "data-test-id": `${dataId}_NoMoreOptionMsg`,
       role: role,

package/es/MultiSelect/MobileHeader/MobileHeader.js

@@ -3,6 +3,7 @@ import Button from "../../Button/Button";
 import { Container, Box } from "../../Layout";
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./MobileHeader.module.css";
 export default function MobileHeader(props) {
   let {
@@ -21,7 +22,7 @@ export default function MobileHeader(props) {
   } = i18nText;
   const showMobileHeader = i18nKeys.mobileHeaderText || !i18nKeys.mobileHeaderText && selectedOptions.length >= 1;
   return /*#__PURE__*/React.createElement("div", {
-    className: style.container
+    className: cn(style.container)
   }, /*#__PURE__*/React.createElement(Container, {
     isCover: false,
     align: "vertical",

package/es/MultiSelect/MultiSelect.js

@@ -27,6 +27,7 @@ import isMobilePopover from "../DropBox/utils/isMobilePopover";
 import { Icon } from '@zohodesk/icons';
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./MultiSelect.module.css";
 /**** Methods ****/
 
@@ -988,8 +989,8 @@ export class MultiSelectComponent extends React.Component {
       adjust: true,
       shrink: true
     }, /*#__PURE__*/React.createElement("span", {
-      className: ` ${style.custmSpan} ${textBoxSize === 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} ${isShowClearIcon ? style.clearIconSpace : ''}
-          ${customChildrenClass ? customChildrenClass : ''}`
+      className: cn(` ${style.custmSpan} ${textBoxSize === 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} ${isShowClearIcon ? style.clearIconSpace : ''}
+          ${customChildrenClass ? customChildrenClass : ''}`)
     }, searchStr), /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
       isDisabled: isDisabled,
       inputRef: this.searchInputRef,
@@ -1121,7 +1122,7 @@ export class MultiSelectComponent extends React.Component {
     } = customProps;
     const isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
+      className: cn(`${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`),
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : null,
@@ -1163,7 +1164,7 @@ export class MultiSelectComponent extends React.Component {
       i18nKeys: i18nKeys,
       onClick: this.handlePopupClose
     }, /*#__PURE__*/React.createElement("div", {
-      className: style.effect
+      className: cn(style.effect)
     }, this.getSelectionUI(true))) : null, needSelectAll && !(limit >= 0) ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
       onSelect: this.handleSelectAll,
       selectAllText: selectAllText,
@@ -1177,7 +1178,7 @@ export class MultiSelectComponent extends React.Component {
       customClass: !isModel && dropBoxSize ? style[dropBoxSize] : '',
       eleRef: this.suggestionContainerRef
     }, isSearching ? /*#__PURE__*/React.createElement("div", {
-      className: style[palette]
+      className: cn(style[palette])
     }, searchText) : suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
       a11y: a11yProps,
       needBorder: false,

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -23,6 +23,7 @@ import MultiSelectHeader from "./MultiSelectHeader";
 import isMobilePopover from "../DropBox/utils/isMobilePopover";
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./MultiSelect.module.css";
 import MobileHeader from "./MobileHeader/MobileHeader";
 /*eslint-disable  react/sort-prop-types*/
@@ -127,7 +128,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
     let isModel = isMobilePopover(needResponsive);
     const isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
     return /*#__PURE__*/React.createElement("div", {
-      className: ` ${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
+      className: cn(` ${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`),
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : null,
@@ -167,7 +168,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       i18nKeys: i18nKeys,
       onClick: this.handlePopupClose
     }, /*#__PURE__*/React.createElement("div", {
-      className: style.effect
+      className: cn(style.effect)
     }, this.getSelectionUI(true)))) : null, needSelectAll && !(limit >= 0) ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
       onSelect: this.handleSelectAll,
       selectAllText: selectAllText,

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

@@ -3,13 +3,13 @@
 exports[`AdvancedGroupMultiSelect rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper  effect"
+    class="wrapper effect"
     data-id="multiSelect"
     data-selector-id="advancedGroupMultiSelect"
     data-test-id="multiSelect"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium  hasBorder borderColor_default"
+      class="flex fullSize row wrap alignItems_center container medium hasBorder borderColor_default"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -21,11 +21,10 @@ exports[`AdvancedGroupMultiSelect rendering the defult props 1`] = `
         data-test-id="boxComponent"
       >
         <span
-          class=" custmSpan custmSpanMedium 
-              "
+          class="custmSpan custmSpanMedium"
         />
         <div
-          class="flex row varClass customContainer    effect     container  custmInputWrapper"
+          class="flex row varClass customContainer effect container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -41,7 +40,7 @@ exports[`AdvancedGroupMultiSelect rendering the defult props 1`] = `
               aria-haspopup="true"
               aria-owns="1"
               autocomplete="off"
-              class="  container medium  default  effect  borderColor_default  "
+              class="container medium default effect borderColor_default"
               data-id="multiSelect_textBox"
               data-selector-id="textBoxIcon"
               data-test-id="multiSelect_textBox"

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

@@ -3,13 +3,13 @@
 exports[`AdvancedMultiSelect rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper   effect "
+    class="wrapper effect"
     data-id="multiSelectComp"
     data-selector-id="advancedMultiSelect"
     data-test-id="multiSelectComp"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium  hasBorder borderColor_default"
+      class="flex fullSize row wrap alignItems_center container medium hasBorder borderColor_default"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -21,11 +21,10 @@ exports[`AdvancedMultiSelect rendering the defult props 1`] = `
         data-test-id="multiSelectComp_textBox"
       >
         <span
-          class=" custmSpan custmSpanMedium 
-              "
+          class="custmSpan custmSpanMedium"
         />
         <div
-          class="flex row varClass customContainer    effect     container  custmInputWrapper"
+          class="flex row varClass customContainer effect container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -41,7 +40,7 @@ exports[`AdvancedMultiSelect rendering the defult props 1`] = `
               aria-haspopup="true"
               aria-owns="1"
               autocomplete="off"
-              class="  container medium  default  effect  borderColor_default  "
+              class="container medium default effect borderColor_default"
               data-id="textBoxIcon"
               data-selector-id="textBoxIcon"
               data-test-id="textBoxIcon"
@@ -74,13 +73,13 @@ exports[`AdvancedMultiSelect rendering the defult props 1`] = `
 exports[`AdvancedMultiSelect rendering the options array with objects and string 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper   effect "
+    class="wrapper effect"
     data-id="multiSelectComp"
     data-selector-id="advancedMultiSelect"
     data-test-id="multiSelectComp"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium  hasBorder borderColor_default"
+      class="flex fullSize row wrap alignItems_center container medium hasBorder borderColor_default"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -92,11 +91,10 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
         data-test-id="multiSelectComp_textBox"
       >
         <span
-          class=" custmSpan custmSpanMedium 
-              "
+          class="custmSpan custmSpanMedium"
         />
         <div
-          class="flex row varClass customContainer    effect     container  custmInputWrapper"
+          class="flex row varClass customContainer effect container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -112,7 +110,7 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
               aria-haspopup="true"
               aria-owns="1"
               autocomplete="off"
-              class="  container medium  default  effect  borderColor_default  "
+              class="container medium default effect borderColor_default"
               data-id="textBoxIcon"
               data-selector-id="textBoxIcon"
               data-test-id="textBoxIcon"
@@ -200,7 +198,7 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
                     <li
                       aria-label="Apple"
                       aria-selected="false"
-                      class="flex row alignItems_center list medium  default defaultHover  mediumwithTick  withBorder"
+                      class="flex row alignItems_center list medium default defaultHover mediumwithTick withBorder"
                       data-a11y-inset-focus="true"
                       data-a11y-list-active="true"
                       data-id="Apple"
@@ -236,7 +234,7 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
                     <li
                       aria-label="Orange"
                       aria-selected="false"
-                      class="flex row alignItems_center list medium  default   mediumwithTick  withBorder"
+                      class="flex row alignItems_center list medium default mediumwithTick withBorder"
                       data-a11y-inset-focus="true"
                       data-a11y-list-active="false"
                       data-id="Orange"
@@ -272,7 +270,7 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
                     <li
                       aria-label="string test"
                       aria-selected="false"
-                      class="flex row alignItems_center list medium  default   mediumwithTick  withBorder"
+                      class="flex row alignItems_center list medium default mediumwithTick withBorder"
                       data-a11y-inset-focus="true"
                       data-a11y-list-active="false"
                       data-id="string test"
@@ -320,13 +318,13 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
 exports[`AdvancedMultiSelect rendering the options array with only objects using allowValueFallback 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper   effect "
+    class="wrapper effect"
     data-id="multiSelectComp"
     data-selector-id="advancedMultiSelect"
     data-test-id="multiSelectComp"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium  hasBorder borderColor_default"
+      class="flex fullSize row wrap alignItems_center container medium hasBorder borderColor_default"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -338,11 +336,10 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
         data-test-id="multiSelectComp_textBox"
       >
         <span
-          class=" custmSpan custmSpanMedium 
-              "
+          class="custmSpan custmSpanMedium"
         />
         <div
-          class="flex row varClass customContainer    effect     container  custmInputWrapper"
+          class="flex row varClass customContainer effect container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -358,7 +355,7 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
               aria-haspopup="true"
               aria-owns="1"
               autocomplete="off"
-              class="  container medium  default  effect  borderColor_default  "
+              class="container medium default effect borderColor_default"
               data-id="textBoxIcon"
               data-selector-id="textBoxIcon"
               data-test-id="textBoxIcon"
@@ -446,7 +443,7 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
                     <li
                       aria-label="Apple"
                       aria-selected="false"
-                      class="flex row alignItems_center list medium  default defaultHover  mediumwithTick  withBorder"
+                      class="flex row alignItems_center list medium default defaultHover mediumwithTick withBorder"
                       data-a11y-inset-focus="true"
                       data-a11y-list-active="true"
                       data-id="Apple"
@@ -482,7 +479,7 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
                     <li
                       aria-label="Orange"
                       aria-selected="false"
-                      class="flex row alignItems_center list medium  default   mediumwithTick  withBorder"
+                      class="flex row alignItems_center list medium default mediumwithTick withBorder"
                       data-a11y-inset-focus="true"
                       data-a11y-list-active="false"
                       data-id="Orange"

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

@@ -3,7 +3,7 @@
 exports[`EmptyState rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class=" default"
+    class="default"
     data-id="empty_noOptnsMsg"
     data-test-id="empty_noOptnsMsg"
     role="alert"

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

@@ -3,13 +3,13 @@
 exports[`MultiSelect Should render with renderCustomSelectedValue 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper     effect"
+    class="wrapper effect"
     data-id="multiSelect"
     data-selector-id="multiSelect"
     data-test-id="multiSelect"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium borderColor_default  hasBorder"
+      class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -21,11 +21,10 @@ exports[`MultiSelect Should render with renderCustomSelectedValue 1`] = `
         data-test-id="boxComponent"
       >
         <span
-          class=" custmSpan custmSpanMedium 
-          "
+          class="custmSpan custmSpanMedium"
         />
         <div
-          class="flex row varClass customContainer    effect     container  custmInputWrapper"
+          class="flex row varClass customContainer effect container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -39,7 +38,7 @@ exports[`MultiSelect Should render with renderCustomSelectedValue 1`] = `
               aria-haspopup="true"
               aria-required="true"
               autocomplete="off"
-              class="  container medium  default  effect  borderColor_default  "
+              class="container medium default effect borderColor_default"
               data-id="multiSelect_textBox"
               data-selector-id="textBoxIcon"
               data-test-id="multiSelect_textBox"
@@ -86,13 +85,13 @@ exports[`MultiSelect Should render with renderCustomSelectedValue 1`] = `
 exports[`MultiSelect rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper     effect"
+    class="wrapper effect"
     data-id="multiSelect"
     data-selector-id="multiSelect"
     data-test-id="multiSelect"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium borderColor_default  hasBorder"
+      class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -104,11 +103,10 @@ exports[`MultiSelect rendering the defult props 1`] = `
         data-test-id="boxComponent"
       >
         <span
-          class=" custmSpan custmSpanMedium 
-          "
+          class="custmSpan custmSpanMedium"
         />
         <div
-          class="flex row varClass customContainer    effect     container  custmInputWrapper"
+          class="flex row varClass customContainer effect container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -122,7 +120,7 @@ exports[`MultiSelect rendering the defult props 1`] = `
               aria-haspopup="true"
               aria-required="true"
               autocomplete="off"
-              class="  container medium  default  effect  borderColor_default  "
+              class="container medium default effect borderColor_default"
               data-id="multiSelect_textBox"
               data-selector-id="textBoxIcon"
               data-test-id="multiSelect_textBox"
@@ -169,13 +167,13 @@ exports[`MultiSelect rendering the defult props 1`] = `
 exports[`MultiSelect rendering with limit feature 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper     effect"
+    class="wrapper effect"
     data-id="multiSelect"
     data-selector-id="multiSelect"
     data-test-id="multiSelect"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium borderColor_default  hasBorder"
+      class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -188,7 +186,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
       >
         <div
           aria-labelledby="7"
-          class="container effect    medium lgRadius danger  pointer "
+          class="container effect medium lgRadius danger pointer"
           data-id="tag_Tag"
           data-selector-id="tag"
           data-test-id="tag_Tag"
@@ -204,8 +202,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
           </div>
           <button
             aria-label="Delete"
-            class="buttonReset close 
-            lgRadiusClose  closedanger "
+            class="buttonReset close lgRadiusClose closedanger"
             data-id="tag_RemoveTag"
             data-test-id="tag_RemoveTag"
             type="button"
@@ -219,7 +216,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
             >
               <i
                 aria-hidden="true"
-                class="zd_font_icons  basic icon-close2 fbold  "
+                class="zd_font_icons basic icon-close2 fbold"
                 data-id="fontIcon"
                 data-selector-id="fontIcon"
                 data-test-id="fontIcon"
@@ -237,7 +234,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
       >
         <div
           aria-labelledby="8"
-          class="container effect    medium lgRadius danger  pointer "
+          class="container effect medium lgRadius danger pointer"
           data-id="tag_Tag"
           data-selector-id="tag"
           data-test-id="tag_Tag"
@@ -253,8 +250,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
           </div>
           <button
             aria-label="Delete"
-            class="buttonReset close 
-            lgRadiusClose  closedanger "
+            class="buttonReset close lgRadiusClose closedanger"
             data-id="tag_RemoveTag"
             data-test-id="tag_RemoveTag"
             type="button"
@@ -268,7 +264,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
             >
               <i
                 aria-hidden="true"
-                class="zd_font_icons  basic icon-close2 fbold  "
+                class="zd_font_icons basic icon-close2 fbold"
                 data-id="fontIcon"
                 data-selector-id="fontIcon"
                 data-test-id="fontIcon"
@@ -286,7 +282,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
       >
         <div
           aria-labelledby="9"
-          class="container effect    medium lgRadius danger  pointer "
+          class="container effect medium lgRadius danger pointer"
           data-id="tag_Tag"
           data-selector-id="tag"
           data-test-id="tag_Tag"
@@ -302,8 +298,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
           </div>
           <button
             aria-label="Delete"
-            class="buttonReset close 
-            lgRadiusClose  closedanger "
+            class="buttonReset close lgRadiusClose closedanger"
             data-id="tag_RemoveTag"
             data-test-id="tag_RemoveTag"
             type="button"
@@ -317,7 +312,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
             >
               <i
                 aria-hidden="true"
-                class="zd_font_icons  basic icon-close2 fbold  "
+                class="zd_font_icons basic icon-close2 fbold"
                 data-id="fontIcon"
                 data-selector-id="fontIcon"
                 data-test-id="fontIcon"
@@ -334,11 +329,10 @@ exports[`MultiSelect rendering with limit feature 1`] = `
         data-test-id="boxComponent"
       >
         <span
-          class=" custmSpan custmSpanMedium clearIconSpace
-          "
+          class="custmSpan custmSpanMedium clearIconSpace"
         />
         <div
-          class="flex row varClass customContainer    effect     container  custmInputWrapper"
+          class="flex row varClass customContainer effect container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -352,7 +346,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
               aria-haspopup="true"
               aria-required="true"
               autocomplete="off"
-              class="  container medium  default  effect  borderColor_default  "
+              class="container medium default effect borderColor_default"
               data-id="multiSelect_textBox"
               data-selector-id="textBoxIcon"
               data-test-id="multiSelect_textBox"
@@ -396,7 +390,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
                   >
                     <i
                       aria-hidden="true"
-                      class="zd_font_icons  rtl basic icon-delete   "
+                      class="zd_font_icons rtl basic icon-delete"
                       data-id="fontIcon"
                       data-selector-id="fontIcon"
                       data-test-id="fontIcon"

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

@@ -3,7 +3,7 @@
 exports[`MultiSelectHeader rendering the basic value 1`] = `
 <DocumentFragment>
   <li
-    class="flex row alignItems_center list medium  default     withBorder selectAll"
+    class="flex row alignItems_center list medium default withBorder selectAll"
     data-a11y-inset-focus="true"
     data-id="MultiSelectHeader_selectAll"
     data-selector-id="listItemWithIcon"
@@ -31,7 +31,7 @@ exports[`MultiSelectHeader rendering the basic value 1`] = `
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons  basic icon-androidd   "
+            class="zd_font_icons basic icon-androidd"
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"