@zohodesk/components 1.6.22 → 1.6.23-exp-2

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -45,6 +45,8 @@ var _Common = require("./../utils/Common");
 
 var _icons = require("@zohodesk/icons");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _MultiSelectModule = _interopRequireDefault(require("./MultiSelect.module.css"));
 
 var _Common2 = require("../utils/Common.js");
@@ -1019,7 +1021,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
       var isShowClearIcon = !isReadOnly && !isDisabled && selectedGroupOptions.length > 1;
       var isEditable = !(isReadOnly || isDisabled);
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
+        className: (0, _cssUtility.cn)("".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '')),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
         "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
         "data-title": isDisabled ? title : null,
@@ -1052,7 +1054,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
         adjust: true,
         shrink: true
       }, /*#__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              ")
+        className: (0, _cssUtility.cn)(" ".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"], {
         isDisabled: isDisabled,
         inputRef: this.searchInputRef,
@@ -1147,7 +1149,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
             key: groupId
           }, groupName && /*#__PURE__*/_react["default"].createElement("div", {
-            className: _MultiSelectModule["default"].groupTitle
+            className: (0, _cssUtility.cn)(_MultiSelectModule["default"].groupTitle)
           }, /*#__PURE__*/_react["default"].createElement(_DropDownHeading["default"], {
             text: groupName,
             a11y: {
@@ -1179,11 +1181,11 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           i18nKeys: i18nKeys,
           htmlId: ariaErrorId
         }), isNextOptions && /*#__PURE__*/_react["default"].createElement("div", {
-          className: _MultiSelectModule["default"].loader
+          className: (0, _cssUtility.cn)(_MultiSelectModule["default"].loader)
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)))) : /*#__PURE__*/_react["default"].createElement("div", {
-          className: _MultiSelectModule["default"].loader
+          className: (0, _cssUtility.cn)(_MultiSelectModule["default"].loader)
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)), getFooter ? isDataLoaded ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter()) : /*#__PURE__*/_react["default"].createElement("div", {
-          className: _MultiSelectModule["default"].loader
+          className: (0, _cssUtility.cn)(_MultiSelectModule["default"].loader)
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : null)));
       }) : null);
     }

package/lib/MultiSelect/AdvancedMultiSelect.js

@@ -43,6 +43,8 @@ var _CustomResponsive = require("../Responsive/CustomResponsive");
 
 var _Loader = _interopRequireDefault(require("@zohodesk/svg/lib/Loader/Loader"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _MultiSelectModule = _interopRequireDefault(require("./MultiSelect.module.css"));
 
 var _Common = require("../utils/Common.js");
@@ -505,7 +507,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
       var isEditable = !(isReadOnly || isDisabled);
       var isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '', " ").concat(containerClass),
+        className: (0, _cssUtility.cn)("".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '', " ").concat(containerClass)),
         "data-id": dataIdMultiSelectComp,
         "data-test-id": dataIdMultiSelectComp,
         "data-title": isDisabled ? title : null,
@@ -536,7 +538,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         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              ")
+        className: (0, _cssUtility.cn)(" ".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"], {
         isDisabled: isDisabled,
         inputRef: this.searchInputRef,

package/lib/MultiSelect/EmptyState.js

@@ -17,6 +17,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _constants = require("./constants");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _MultiSelectModule = _interopRequireDefault(require("./MultiSelect.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -82,13 +84,13 @@ var EmptyState = /*#__PURE__*/function (_React$PureComponent) {
       var _a11y$role = a11y.role,
           role = _a11y$role === void 0 ? 'alert' : _a11y$role;
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isLoading ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: className,
+        className: (0, _cssUtility.cn)(className),
         "data-id": "".concat(dataId, "_Loading"),
         "data-test-id": "".concat(dataId, "_Loading"),
         role: role,
         id: htmlId
       }, loadingText) : searchString.length && suggestions.length === 0 ? getCustomEmptyState ? getCustomEmptyState() : /*#__PURE__*/_react["default"].createElement("div", {
-        className: className,
+        className: (0, _cssUtility.cn)(className),
         "data-id": "".concat(dataId, "_srchEmptyMsg"),
         "data-test-id": "".concat(dataId, "_srchEmptyMsg"),
         role: role,
@@ -100,7 +102,7 @@ var EmptyState = /*#__PURE__*/function (_React$PureComponent) {
         htmlId: htmlId,
         className: className
       }) : /*#__PURE__*/_react["default"].createElement("div", {
-        className: className,
+        className: (0, _cssUtility.cn)(className),
         "data-id": "".concat(dataId, "_noOptnsMsg"),
         "data-test-id": "".concat(dataId, "_noOptnsMsg"),
         role: role,
@@ -112,7 +114,7 @@ var EmptyState = /*#__PURE__*/function (_React$PureComponent) {
         htmlId: htmlId,
         className: className
       }) : /*#__PURE__*/_react["default"].createElement("div", {
-        className: className,
+        className: (0, _cssUtility.cn)(className),
         "data-id": "".concat(dataId, "_NoMoreOptionMsg"),
         "data-test-id": "".concat(dataId, "_NoMoreOptionMsg"),
         role: role,

package/lib/MultiSelect/MobileHeader/MobileHeader.js

@@ -15,6 +15,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _MobileHeaderModule = _interopRequireDefault(require("./MobileHeader.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -32,7 +34,7 @@ function MobileHeader(props) {
       mobileHeaderText = i18nText.mobileHeaderText;
   var showMobileHeader = i18nKeys.mobileHeaderText || !i18nKeys.mobileHeaderText && selectedOptions.length >= 1;
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: _MobileHeaderModule["default"].container
+    className: (0, _cssUtility.cn)(_MobileHeaderModule["default"].container)
   }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
     isCover: false,
     align: "vertical",

package/lib/MultiSelect/MultiSelect.js

@@ -45,6 +45,8 @@ var _isMobilePopover = _interopRequireDefault(require("../DropBox/utils/isMobile
 
 var _icons = require("@zohodesk/icons");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _MultiSelectModule = _interopRequireDefault(require("./MultiSelect.module.css"));
 
 var _Common = require("../utils/Common.js");
@@ -1073,7 +1075,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         adjust: true,
         shrink: true
       }, /*#__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          ").concat(customChildrenClass ? customChildrenClass : '')
+        className: (0, _cssUtility.cn)(" ".concat(_MultiSelectModule["default"].custmSpan, " ").concat(textBoxSize === 'xmedium' ? _MultiSelectModule["default"].custmSpanXmedium : _MultiSelectModule["default"].custmSpanMedium, " ").concat(isShowClearIcon ? _MultiSelectModule["default"].clearIconSpace : '', "\n          ").concat(customChildrenClass ? customChildrenClass : ''))
       }, searchStr), /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({
         isDisabled: isDisabled,
         inputRef: this.searchInputRef,
@@ -1203,7 +1205,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       var SuggestionsProps = customProps.SuggestionsProps;
       var isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(disableAction ? (0, _CssProvider["default"])('isBlock') : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
+        className: (0, _cssUtility.cn)("".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(disableAction ? (0, _CssProvider["default"])('isBlock') : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '')),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
         "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
         "data-title": isDisabled ? title : null,
@@ -1245,7 +1247,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         i18nKeys: i18nKeys,
         onClick: this.handlePopupClose
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: _MultiSelectModule["default"].effect
+        className: (0, _cssUtility.cn)(_MultiSelectModule["default"].effect)
       }, this.getSelectionUI(true))) : null, needSelectAll && !(limit >= 0) ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
         onSelect: this.handleSelectAll,
         selectAllText: selectAllText,
@@ -1259,7 +1261,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         customClass: !isModel && dropBoxSize ? _MultiSelectModule["default"][dropBoxSize] : '',
         eleRef: this.suggestionContainerRef
       }, isSearching ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: _MultiSelectModule["default"][palette]
+        className: (0, _cssUtility.cn)(_MultiSelectModule["default"][palette])
       }, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
         a11y: a11yProps,
         needBorder: false,

package/lib/MultiSelect/MultiSelectWithAvatar.js

@@ -41,6 +41,8 @@ var _MultiSelectHeader = _interopRequireDefault(require("./MultiSelectHeader"));
 
 var _isMobilePopover = _interopRequireDefault(require("../DropBox/utils/isMobilePopover"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _MultiSelectModule = _interopRequireDefault(require("./MultiSelect.module.css"));
 
 var _MobileHeader = _interopRequireDefault(require("./MobileHeader/MobileHeader"));
@@ -181,7 +183,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
       var isModel = (0, _isMobilePopover["default"])(needResponsive);
       var isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: " ".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(disableAction ? (0, _CssProvider["default"])('isBlock') : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
+        className: (0, _cssUtility.cn)(" ".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(disableAction ? (0, _CssProvider["default"])('isBlock') : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '')),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
         "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
         "data-title": isDisabled ? title : null,
@@ -221,7 +223,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
         i18nKeys: i18nKeys,
         onClick: this.handlePopupClose
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: _MultiSelectModule["default"].effect
+        className: (0, _cssUtility.cn)(_MultiSelectModule["default"].effect)
       }, this.getSelectionUI(true)))) : null, needSelectAll && !(limit >= 0) ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
         onSelect: this.handleSelectAll,
         selectAllText: selectAllText,

package/lib/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/lib/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/lib/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/lib/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"