@zohodesk/components 1.0.0-temp-252.4 → 1.0.0-temp-256.1

package/es/ListItem/props/defaultProps.js

@@ -82,6 +82,7 @@ export const ListItemWithIconDefaultProps = {
   needBorder: true,
   a11y: {},
   customClass: '',
+  customTitleBoxClass: '',
   customProps: {},
   dataSelectorId: 'listItemWithIcon',
   needMultiLineText: false,

package/es/ListItem/props/propTypes.js

@@ -100,6 +100,7 @@ export const ListItemWithAvatar_Props = {
   value: PropTypes.string,
   secondaryValue: PropTypes.string,
   renderValueRightPlaceholderNode: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  renderLeftValuePlaceholderNode: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   lhsAlignContent: PropTypes.oneOf(['start', 'center', 'end']),
   a11y: PropTypes.shape({
     role: PropTypes.string,
@@ -110,7 +111,8 @@ export const ListItemWithAvatar_Props = {
     customListItem: PropTypes.string,
     customAvatar: PropTypes.string,
     customAvatarTeam: PropTypes.string,
-    customValueRightPlaceholder: PropTypes.string
+    customValueRightPlaceholder: PropTypes.string,
+    customLeftValuePlaceholder: PropTypes.string
   }),
   needMultiLineText: PropTypes.bool,
   customProps: PropTypes.shape({
@@ -141,6 +143,7 @@ export const ListItemWithCheckBox_Props = {
   secondaryValue: PropTypes.string,
   needBorder: PropTypes.bool,
   renderValueRightPlaceholderNode: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  renderLeftValuePlaceholderNode: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   lhsAlignContent: PropTypes.oneOf(['start', 'center', 'end']),
   lhsJustifyContent: PropTypes.oneOf(['start', 'center', 'end']),
   a11y: PropTypes.shape({
@@ -152,7 +155,8 @@ export const ListItemWithCheckBox_Props = {
     customListItem: PropTypes.string,
     customCheckBox: PropTypes.string,
     customLabel: PropTypes.string,
-    customValueRightPlaceholder: PropTypes.string
+    customValueRightPlaceholder: PropTypes.string,
+    customLeftValuePlaceholder: PropTypes.string
   }),
   customProps: PropTypes.object
 };
@@ -180,6 +184,7 @@ export const ListItemWithIcon_Props = {
   value: PropTypes.string,
   secondaryValue: PropTypes.string,
   renderValueRightPlaceholderNode: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  renderLeftValuePlaceholderNode: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   lhsAlignContent: PropTypes.oneOf(['start', 'center', 'end']),
   lhsJustifyContent: PropTypes.oneOf(['start', 'center', 'end']),
   a11y: PropTypes.shape({
@@ -190,6 +195,8 @@ export const ListItemWithIcon_Props = {
   needMultiLineText: PropTypes.bool,
   customClass: PropTypes.string,
   customValueRightPlaceholderClass: PropTypes.string,
+  customLeftValuePlaceholderClass: PropTypes.string,
+  customTitleBoxClass: PropTypes.string,
   customProps: PropTypes.shape({
     ListItemProps: PropTypes.object
   }),
@@ -218,6 +225,7 @@ export const ListItemWithRadio_Props = {
   secondaryValue: PropTypes.string,
   needBorder: PropTypes.bool,
   renderValueRightPlaceholderNode: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  renderLeftValuePlaceholderNode: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   lhsAlignContent: PropTypes.oneOf(['start', 'center', 'end']),
   lhsJustifyContent: PropTypes.oneOf(['start', 'center', 'end']),
   a11y: PropTypes.shape({
@@ -229,7 +237,8 @@ export const ListItemWithRadio_Props = {
     customListItem: PropTypes.string,
     customRadio: PropTypes.string,
     customRadioWrap: PropTypes.string,
-    customValueRightPlaceholder: PropTypes.string
+    customValueRightPlaceholder: PropTypes.string,
+    customLeftValuePlaceholder: PropTypes.string
   }),
   customProps: PropTypes.object
 };

package/es/Modal/Portal/Portal.js

@@ -3,11 +3,10 @@ import BasePortal from '@zohodesk/dotkit/es/react/components/Portal/Portal';
 import { getLibraryConfig } from "../../Provider/Config";
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-export default function Portal(_ref) {
-  let {
-    children,
-    portalId
-  } = _ref;
+export default function Portal({
+  children,
+  portalId
+}) {
   const getPortalContainer = useCallback(() => {
     const getConfigPortalContainer = getLibraryConfig('getPortalContainer');
 

package/es/Modal/Portal/__tests__/__snapshots__/Portal.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Portal rendering the defult props 1`] = `
 <body>

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Modal rendering the defult props 1`] = `
 <body>

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 ****/
 
@@ -272,9 +273,7 @@ class AdvancedGroupMultiSelect extends React.Component {
     }) : this.togglePopup(e);
   }
 
-  handleClickSelectedOption() {
-    let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-    let e = arguments.length > 1 ? arguments[1] : undefined;
+  handleClickSelectedOption(id = '', e) {
     let {
       selectedOptionIds
     } = this.state;
@@ -546,11 +545,7 @@ class AdvancedGroupMultiSelect extends React.Component {
     });
   }
 
-  handleFetchOptions() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
+  handleFetchOptions(...args) {
     let [APICall, searchStr] = args;
     let {
       isFetchingOptions
@@ -663,9 +658,7 @@ class AdvancedGroupMultiSelect extends React.Component {
     this.handleChange([]);
   }
 
-  handleChange() {
-    let selectedOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    let e = arguments.length > 1 ? arguments[1] : undefined;
+  handleChange(selectedOptions = [], e) {
     let {
       onChange,
       needToCloseOnSelect,
@@ -837,10 +830,9 @@ class AdvancedGroupMultiSelect extends React.Component {
     }
   }
 
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
+  responsiveFunc({
+    mediaQueryOR
+  }) {
     return {
       tabletMode: mediaQueryOR([{
         maxWidth: 700
@@ -931,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,
@@ -964,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,
@@ -1011,97 +1003,94 @@ class AdvancedGroupMultiSelect extends React.Component {
     }))) : null))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
-    }, _ref2 => {
+    }, ({
+      tabletMode
+    }) => /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      animationStyle: animationStyle,
+      boxPosition: position || `${defaultDropBoxPosition}Center`,
+      getRef: getContainerRef,
+      isActive: isPopupReady,
+      isAnimate: true,
+      isArrow: false,
+      onClick: removeClose,
+      needResponsive: needResponsive,
+      isPadding: isPadding,
+      isBoxPaddingNeed: !needSelectAll,
+      isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+      positionsOffset: positionsOffset,
+      targetOffset: targetOffset,
+      isRestrictScroll: isRestrictScroll,
+      htmlId: setAriaId,
+      a11y: {
+        role: 'listbox',
+        ariaMultiselectable: true
+      },
+      alignBox: "row",
+      dataId: `${dataId}_dropbox`
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Card, {
+      customClass: `${style.box} ${style[`${palette}Box`]}`,
+      onScroll: this.handleScroll
+    }, needSelectAll && !(limit >= 0) ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
+      onSelect: this.handleSelectAll,
+      selectAllText: selectAllText,
+      suggestions: suggestionOptionIds,
+      dataId: dataId
+    })) : null, isDataLoaded ? /*#__PURE__*/React.createElement(CardContent, {
+      shrink: true,
+      customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
+      eleRef: this.suggestionContainerRef
+    }, /*#__PURE__*/React.createElement(React.Fragment, {
+      key: 'SuggestonsParent'
+    }, suggestionGroups.length ? suggestionGroups.map(group => {
       let {
-        tabletMode
-      } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
-        animationStyle: animationStyle,
-        boxPosition: position || `${defaultDropBoxPosition}Center`,
-        getRef: getContainerRef,
-        isActive: isPopupReady,
-        isAnimate: true,
-        isArrow: false,
-        onClick: removeClose,
-        needResponsive: needResponsive,
-        isPadding: isPadding,
-        isBoxPaddingNeed: !needSelectAll,
-        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
-        positionsOffset: positionsOffset,
-        targetOffset: targetOffset,
-        isRestrictScroll: isRestrictScroll,
-        htmlId: setAriaId,
+        options: suggestions = []
+      } = group;
+      let groupId = group.id;
+      let groupName = group.name;
+      let hoverId = suggestionOptionIds[hoverIndex];
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: groupId
+      }, groupName && /*#__PURE__*/React.createElement("div", {
+        className: cn(style.groupTitle)
+      }, /*#__PURE__*/React.createElement(DropDownHeading, {
+        text: groupName,
+        a11y: {
+          role: 'heading'
+        }
+      })), /*#__PURE__*/React.createElement(Suggestions, _extends({}, SuggestionsProps, {
+        suggestions: suggestions,
+        selectedOptions: selectedOptionIds,
+        getRef: this.suggestionItemRef,
+        hoverId: hoverId,
+        onClick: this.handleSelectOption,
+        onMouseEnter: this.handleMouseEnter,
+        needTick: true,
+        listItemSize: listItemSize,
         a11y: {
-          role: 'listbox',
-          ariaMultiselectable: true
+          role: 'option'
         },
-        alignBox: "row",
-        dataId: `${dataId}_dropbox`
-      }, /*#__PURE__*/React.createElement(Box, {
-        flexible: true
-      }, /*#__PURE__*/React.createElement(Card, {
-        customClass: `${style.box} ${style[`${palette}Box`]}`,
-        onScroll: this.handleScroll
-      }, needSelectAll && !(limit >= 0) ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
-        onSelect: this.handleSelectAll,
-        selectAllText: selectAllText,
-        suggestions: suggestionOptionIds,
-        dataId: dataId
-      })) : null, isDataLoaded ? /*#__PURE__*/React.createElement(CardContent, {
-        shrink: true,
-        customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
-        eleRef: this.suggestionContainerRef
-      }, /*#__PURE__*/React.createElement(React.Fragment, {
-        key: 'SuggestonsParent'
-      }, suggestionGroups.length ? suggestionGroups.map(group => {
-        let {
-          options: suggestions = []
-        } = group;
-        let groupId = group.id;
-        let groupName = group.name;
-        let hoverId = suggestionOptionIds[hoverIndex];
-        return /*#__PURE__*/React.createElement(React.Fragment, {
-          key: groupId
-        }, groupName && /*#__PURE__*/React.createElement("div", {
-          className: style.groupTitle
-        }, /*#__PURE__*/React.createElement(DropDownHeading, {
-          text: groupName,
-          a11y: {
-            role: 'heading'
-          }
-        })), /*#__PURE__*/React.createElement(Suggestions, _extends({}, SuggestionsProps, {
-          suggestions: suggestions,
-          selectedOptions: selectedOptionIds,
-          getRef: this.suggestionItemRef,
-          hoverId: hoverId,
-          onClick: this.handleSelectOption,
-          onMouseEnter: this.handleMouseEnter,
-          needTick: true,
-          listItemSize: listItemSize,
-          a11y: {
-            role: 'option'
-          },
-          limit: limit,
-          limitReachedMessage: limitReachedMessage,
-          dataId: `${dataId}_Options`
-        })));
-      }) : /*#__PURE__*/React.createElement(EmptyState, {
-        options: revampedGroups,
-        searchString: searchStr,
-        suggestions: suggestionGroups,
-        renderCustomEmptyState: renderCustomEmptyState,
-        dataId: dataId,
-        isLoading: isFetchingOptions,
-        i18nKeys: i18nKeys,
-        htmlId: ariaErrorId
-      }), isNextOptions && /*#__PURE__*/React.createElement("div", {
-        className: style.loader
-      }, /*#__PURE__*/React.createElement(Loader, null)))) : /*#__PURE__*/React.createElement("div", {
-        className: style.loader
-      }, /*#__PURE__*/React.createElement(Loader, null)), getFooter ? isDataLoaded ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : /*#__PURE__*/React.createElement("div", {
-        className: style.loader
-      }, /*#__PURE__*/React.createElement(Loader, null)) : null)));
-    }) : null);
+        limit: limit,
+        limitReachedMessage: limitReachedMessage,
+        dataId: `${dataId}_Options`
+      })));
+    }) : /*#__PURE__*/React.createElement(EmptyState, {
+      options: revampedGroups,
+      searchString: searchStr,
+      suggestions: suggestionGroups,
+      renderCustomEmptyState: renderCustomEmptyState,
+      dataId: dataId,
+      isLoading: isFetchingOptions,
+      i18nKeys: i18nKeys,
+      htmlId: ariaErrorId
+    }), isNextOptions && /*#__PURE__*/React.createElement("div", {
+      className: cn(style.loader)
+    }, /*#__PURE__*/React.createElement(Loader, null)))) : /*#__PURE__*/React.createElement("div", {
+      className: cn(style.loader)
+    }, /*#__PURE__*/React.createElement(Loader, null)), getFooter ? isDataLoaded ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : /*#__PURE__*/React.createElement("div", {
+      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 ****/
 
@@ -83,9 +84,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     return suggestions;
   }
 
-  handleChange() {
-    let selectedOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    let e = arguments.length > 1 ? arguments[1] : undefined;
+  handleChange(selectedOptions = [], e) {
     const {
       optionsNormalize,
       searchStr
@@ -333,10 +332,9 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     });
   }
 
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
+  responsiveFunc({
+    mediaQueryOR
+  }) {
     return {
       tabletMode: mediaQueryOR([{
         maxWidth: 700
@@ -385,6 +383,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       needEffect,
       disabledOptions,
       isLoading,
+      shouldUseInternalLoader,
       dataSelectorId,
       customClass,
       isAbsolutePositioningNeeded,
@@ -436,8 +435,9 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     });
     let isShowClearIcon = !isReadOnly && !isDisabled && isShowClear;
     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,
@@ -468,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,
@@ -514,79 +514,76 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     }))) : null))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
-    }, _ref2 => {
-      let {
-        tabletMode
-      } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropBox, _extends({
-        animationStyle: animationStyle,
-        boxPosition: position || `${defaultDropBoxPosition}Center`,
-        getRef: getContainerRef,
-        isActive: isPopupReady,
-        isAnimate: isAnimate,
-        isArrow: false,
-        onClick: removeClose,
-        isPadding: false,
-        isBoxPaddingNeed: isBoxPaddingNeed,
-        htmlId: setAriaId,
-        a11y: {
-          role: 'listbox',
-          ariaMultiselectable: true
-        },
-        dataId: `${dataIdMultiSelectComp}_dropbox`,
-        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
-        positionsOffset: positionsOffset,
-        targetOffset: targetOffset,
-        isRestrictScroll: isRestrictScroll
-      }, DropBoxProps, {
-        alignBox: "row",
-        isResponsivePadding: getFooter ? false : true
-      }), isLoading ? /*#__PURE__*/React.createElement(Container, {
-        align: "both",
-        className: style.loader
-      }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(Box, {
-        flexible: true
-      }, /*#__PURE__*/React.createElement(Card, {
-        customClass: style.box,
-        onScroll: this.handleScroll
-      }, needSelectAll && !(limit >= 0) ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
-        onSelect: this.handleSelectAll,
-        selectAllText: selectAllText,
-        suggestions: suggestions,
-        dataId: dataIdSelectAllEle
-      })) : null, /*#__PURE__*/React.createElement(CardContent, {
-        shrink: true,
-        customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
-        eleRef: this.suggestionContainerRef
-      }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
-        suggestions: suggestions,
-        selectedOptions: allselectedOptionIds,
-        getRef: this.suggestionItemRef,
-        hoverOption: hoverOption,
-        onClick: this.handleSelectOption,
-        onMouseEnter: this.handleMouseEnter,
-        needTick: true,
-        listItemSize: listItemSize,
-        a11y: {
-          role: 'option'
-        },
-        dataId: `${dataIdMultiSelectComp}_Options`,
-        limit: limit,
-        limitReachedMessage: limitReachedMessage
-      }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
-        isLoading: isFetchingOptions,
-        options: options,
-        searchString: searchStr,
-        suggestions: suggestions,
-        renderCustomEmptyState: renderCustomEmptyState,
-        dataId: dataIdLoading,
-        i18nKeys: i18nKeys,
-        htmlId: ariaErrorId
-      }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        align: "both"
-      }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)));
-    }) : null);
+    }, ({
+      tabletMode
+    }) => /*#__PURE__*/React.createElement(ResponsiveDropBox, _extends({
+      animationStyle: animationStyle,
+      boxPosition: position || `${defaultDropBoxPosition}Center`,
+      getRef: getContainerRef,
+      isActive: isPopupReady,
+      isAnimate: isAnimate,
+      isArrow: false,
+      onClick: removeClose,
+      isPadding: false,
+      isBoxPaddingNeed: isBoxPaddingNeed,
+      htmlId: setAriaId,
+      a11y: {
+        role: 'listbox',
+        ariaMultiselectable: true
+      },
+      dataId: `${dataIdMultiSelectComp}_dropbox`,
+      isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+      positionsOffset: positionsOffset,
+      targetOffset: targetOffset,
+      isRestrictScroll: isRestrictScroll
+    }, DropBoxProps, {
+      alignBox: "row",
+      isResponsivePadding: getFooter ? false : true
+    }), (shouldUseInternalLoader ? isLoading : isLoading && isInitialEmptyOptions) ? /*#__PURE__*/React.createElement(Container, {
+      align: "both",
+      className: style.loader
+    }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Card, {
+      customClass: style.box,
+      onScroll: this.handleScroll
+    }, needSelectAll && !(limit >= 0) ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
+      onSelect: this.handleSelectAll,
+      selectAllText: selectAllText,
+      suggestions: suggestions,
+      dataId: dataIdSelectAllEle
+    })) : null, /*#__PURE__*/React.createElement(CardContent, {
+      shrink: true,
+      customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
+      eleRef: this.suggestionContainerRef
+    }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
+      suggestions: suggestions,
+      selectedOptions: allselectedOptionIds,
+      getRef: this.suggestionItemRef,
+      hoverOption: hoverOption,
+      onClick: this.handleSelectOption,
+      onMouseEnter: this.handleMouseEnter,
+      needTick: true,
+      listItemSize: listItemSize,
+      a11y: {
+        role: 'option'
+      },
+      dataId: `${dataIdMultiSelectComp}_Options`,
+      limit: limit,
+      limitReachedMessage: limitReachedMessage
+    }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
+      isLoading: isFetchingOptions,
+      options: options,
+      searchString: searchStr,
+      suggestions: suggestions,
+      renderCustomEmptyState: renderCustomEmptyState,
+      dataId: dataIdLoading,
+      i18nKeys: i18nKeys,
+      htmlId: ariaErrorId
+    }), (shouldUseInternalLoader ? isFetchingOptions : isLoading && !isInitialEmptyOptions) && /*#__PURE__*/React.createElement(Container, {
+      isCover: false,
+      align: "both"
+    }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)))) : null);
   }
 
 }

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",