@zohodesk/components 1.6.0 → 1.6.2

package/es/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -33,7 +33,7 @@
 
 .mobRadius {
     --dropbox_border_radius: 30px 30px 0 0;
-    --dropbox_padding: var(--zd_size10) 0 0 0;
+    --dropbox_padding: 10px 0 0 0;
 }
 
 /* sizes */
@@ -201,7 +201,10 @@
     position: absolute;
     height: var(--zd_size34) ;
     width: var(--zd_size34) ;
-    clip: rect(var(--zd_size3), var(--zd_size29), var(--zd_size17), var(--zd_size8)) ;
+    clip: rect(var(--zd_size3),
+ var(--zd_size29),
+ var(--zd_size17),
+ var(--zd_size8)) ;
     padding: var(--zd_size4) ;
     display: flex;
     align-items: center;
@@ -434,7 +437,7 @@
 }
 
 .boxPadding {
-    --dropbox_padding: var(--zd_size10) 0;
+    --dropbox_padding: 10px 0;
 }
 
 .darkPalette {

package/es/DropDown/DropDown.js

@@ -10,8 +10,7 @@ export default class DropDown extends React.Component {
     let {
       children
     } = this.props;
-    return /*#__PURE__*/React.createElement(PopOver, { ...this.props
-    }, /*#__PURE__*/React.createElement(PopOverTarget, null, children[0]), /*#__PURE__*/React.createElement(PopOverContainer, null, children[1]));
+    return /*#__PURE__*/React.createElement(PopOver, this.props, /*#__PURE__*/React.createElement(PopOverTarget, null, children[0]), /*#__PURE__*/React.createElement(PopOverContainer, null, children[1]));
   }
 
 }

package/es/DropDown/DropDownHeading.module.css

@@ -2,14 +2,14 @@
   /* dropdownheading default variables */
   --dropdownheading_text_color: var(--zdt_dropdown_default_text);
   --dropdownheading_text_transform: uppercase;
-  --dropdownheading_padding: var(--zd_size10) var(--zd_size20);
+  --dropdownheading_padding: 10px 20px;
   --dropdownheading_bg_color: none;
 
   /* dropdownheading underline default variables */
-  --dropdownheading_underline_width: var(--zd_size20);
-  --dropdownheading_underline_height: var(--zd_size1);
+  --dropdownheading_underline_width: 20px;
+  --dropdownheading_underline_height: 1px;
   --dropdownheading_underline_bg_color: var(--zdt_dropdown_default_bg);
-  --dropdownheading_underline_left: var(--zd_size20);
+  --dropdownheading_underline_left: 20px;
 }
 .default {
   composes: dotted semibold from '../common/common.module.css';

package/es/DropDown/DropDownItem.module.css

@@ -1,11 +1,11 @@
 .varClass {
   /* dropdownitem default variables */
-  --dropdownitem-padding: var(--zd_size9) var(--zd_size19);
+  --dropdownitem-padding: 9px 19px;
   --dropdownitem-border-color: var(--zdt_dropdown_default_border);
   --dropdownitem-bg-color: var(--zdt_dropdown_mirror_bg);
 
   /* dropdownitem user default variables */
-  --dropdownitem-user-width: var(--zd_size42);
+  --dropdownitem-user-width: 42px;
   --dropdownitem-user-border-style: solid;
   --dropdownitem-user-border-color: var(--zdt_dropdown_user_default_border);
   --dropdownitem-user-cursor: pointer;
@@ -42,11 +42,11 @@
 }
 
 [dir=ltr] .padding {
-  --dropdownitem-padding: 0 var(--zd_size50) 0 0;
+  --dropdownitem-padding: 0 50px 0 0/*rtl: 0 0 0 50px*/;
 }
 
 [dir=rtl] .padding {
-  --dropdownitem-padding: 0 0 0 var(--zd_size50);
+  --dropdownitem-padding: 0 0 0 50px;
 }
 
 .children {

package/es/DropDown/DropDownSearch.module.css

@@ -1,14 +1,14 @@
 .varClass {
   /* dropdownsearch default variables */
-  --dropdownsearch-padding: 0 var(--zd_size15) 0;
+  --dropdownsearch-padding: 0 15px 0;
 }
 .search {
   composes: varClass;
   padding: var(--dropdownsearch-padding);
 }
 .smallSearch {
-  --dropdownsearch-padding: 0 var(--zd_size5) 0;
+  --dropdownsearch-padding: 0 5px 0;
 }
 .mediumSearch {
-  --dropdownsearch-padding: 0 var(--zd_size15) 0;
+  --dropdownsearch-padding: 0 15px 0;
 }

package/es/Label/Label.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: [
   'small', 'medium', 'large', 'title', 'subtitle', 'default', 'primary', 'secondary', 'danger', 'mandatory'
 ]}] */
@@ -47,16 +49,14 @@ export default class Label extends React.Component {
       id: id,
       tabIndex: tabIndex
     }, text);
-    return /*#__PURE__*/React.createElement(React.Fragment, null, isRenderable(renderRightPlaceholderNode) ? /*#__PURE__*/React.createElement(Flex, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isRenderable(renderRightPlaceholderNode) ? /*#__PURE__*/React.createElement(Flex, _extends({
       $ui_displayMode: "flex",
       $ui_direction: "row",
-      $ui_alignItems: "center",
-      ...containerProps
-    }, labelElement, /*#__PURE__*/React.createElement(Flex, {
+      $ui_alignItems: "center"
+    }, containerProps), labelElement, /*#__PURE__*/React.createElement(Flex, _extends({
       $ui_displayMode: "flex",
-      $ui_alignItems: "center",
-      ...rightPlaceholderNodeProps
-    }, renderNode(renderRightPlaceholderNode))) : /*#__PURE__*/React.createElement(React.Fragment, null, labelElement));
+      $ui_alignItems: "center"
+    }, rightPlaceholderNodeProps), renderNode(renderRightPlaceholderNode))) : /*#__PURE__*/React.createElement(React.Fragment, null, labelElement));
   }
 
 }

package/es/Label/Label.module.css

@@ -1,6 +1,6 @@
 .varClass {
   /* label default variables */
-  --label_font_size: var(--zd_font_size14);
+  --label_font_size: 14px;
   --label_text_color: var(--zdt_label_default_text);
   --label_font_weight: var(--zd-fw-normal);
   --label_cursor: default;
@@ -17,19 +17,19 @@
   cursor: var(--label_cursor);
 }
 .xsmall {
-  --label_font_size: var(--zd_font_size12);
+  --label_font_size: 12px;
   --label_line_height: 1.5;
 }
 .small {
-  --label_font_size: var(--zd_font_size13);
+  --label_font_size: 13px;
   --label_line_height: 1.385;
 }
 .medium {
-  --label_font_size: var(--zd_font_size14);
+  --label_font_size: 14px;
   --label_line_height: 1.286;
 }
 .large {
-  --label_font_size: var(--zd_font_size26);
+  --label_font_size: 26px;
   --label_line_height: 0.6923;
   composes: semibold from '../common/common.module.css';
 }

package/es/ListItem/ListContainer.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 /**** Libraries ****/
 import React, { useCallback } from 'react';
 import { Container } from "../Layout";
@@ -72,7 +74,7 @@ const ListContainer = props => {
     options.tabindex = '0';
   }
 
-  return /*#__PURE__*/React.createElement(Container, {
+  return /*#__PURE__*/React.createElement(Container, _extends({
     role: role,
     "data-a11y-inset-focus": insetFocus,
     "aria-selected": ariaSelected,
@@ -88,11 +90,8 @@ const ListContainer = props => {
     onMouseOver: onMouseOver,
     eleRef: eleRef,
     tagName: isLink ? 'a' : 'li',
-    "data-title": isDisabled ? disableTitle : title,
-    ...options,
-    ...customProps,
-    ...a11yAttributes
-  }, children);
+    "data-title": isDisabled ? disableTitle : title
+  }, options, customProps, a11yAttributes), children);
 };
 
 ListContainer.defaultProps = ListContainerDefaultProps;

package/es/ListItem/ListItem.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 /**** Libraries ****/
 import React from 'react';
 import { Box } from "../Layout";
@@ -97,7 +99,7 @@ export default class ListItem extends React.Component {
     } = listA11y;
     let tickIconPalette = style[`${palette}Tick`] ? style[`${palette}Tick`] : '';
     let dataIdString = dataId ? dataId : value ? String(value).replace("'", '_') : 'listItem';
-    return /*#__PURE__*/React.createElement(ListContainer, {
+    return /*#__PURE__*/React.createElement(ListContainer, _extends({
       a11y: listA11y,
       size: size,
       palette: palette,
@@ -118,9 +120,8 @@ export default class ListItem extends React.Component {
       onClick: this.handleClick,
       onMouseEnter: this.handleMouseEnter,
       eleRef: this.getRef,
-      customProps: ListItemProps,
-      ...ContainerProps
-    }, /*#__PURE__*/React.createElement(Box, {
+      customProps: ListItemProps
+    }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: style.leftBox
     }, /*#__PURE__*/React.createElement(Box, {

package/es/ListItem/ListItem.module.css

@@ -1,8 +1,8 @@
 .varClass {
   /* listitem default variables */
-  --listitem_font_size: var(--zd_font_size13);
+  --listitem_font_size: 13px;
   --listitem_text_color: var(--zdt_listitem_default_text);
-  --listitem_padding: var(--zd_size9) var(--zd_size20);
+  --listitem_padding: 9px 20px;
   --listitem_border_width: 0;
   --listitem_border_color: var(--zdt_listitem_default_border);
   --listitem_bg_color: var(--zdt_listitem_default_bg);
@@ -16,9 +16,10 @@
   /* listitem tick icon default variables */
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
 }[dir=ltr] .varClass {
-  --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
+  --listitem_avatar_margin: 0 15px 0 0
+    /*rtl: 0 0 0 15px*/;
 }[dir=rtl] .varClass {
-  --listitem_avatar_margin: 0 0 0 var(--zd_size15);
+  --listitem_avatar_margin: 0 0 0 15px;
 }
 .list {
   composes: varClass;
@@ -48,23 +49,27 @@
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
 [dir=ltr] .small {
-  --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5);
+  --listitem_padding: 7px 3px 7px
+    5px
+    /*rtl: 7px 5px 7px 3px*/;
 }
 [dir=rtl] .small {
-  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3);
+  --listitem_padding: 7px 5px 7px 3px;
 }
 .medium {
-  --listitem_padding: var(--zd_size7) var(--zd_size20);
-  --listitem_min_height: var(--zd_size35);
+  --listitem_padding: 7px 20px;
+  --listitem_min_height: 35px;
 }
 .large {
-  --listitem_min_height: var(--zd_size48);
+  --listitem_min_height: 48px;
 }
 [dir=ltr] .large {
-  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
+  --listitem_padding: 10px 3px 10px
+    25px
+    /*rtl: 10px 25px 10px 3px*/;
 }
 [dir=rtl] .large {
-  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
+  --listitem_padding: 10px 25px 10px 3px;
 }
 .value,
 .children,.secondaryValue {
@@ -244,26 +249,32 @@
   display: block;
 }
 [dir=ltr] .smallwithTick {
-  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size5);
+  --listitem_padding: 7px 39px 7px
+    5px
+    /*rtl: 7px 5px 7px 39px*/;
 }
 [dir=rtl] .smallwithTick {
-  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39);
+  --listitem_padding: 7px 5px 7px 39px;
 }
 [dir=ltr] .mediumwithTick {
-  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size20);
+  --listitem_padding: 7px 39px 7px
+    20px
+    /*rtl: 7px 20px 7px 39px*/;
 }
 [dir=rtl] .mediumwithTick {
-  --listitem_padding: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39);
+  --listitem_padding: 7px 20px 7px 39px;
 }
 [dir=ltr] .largewithTick {
-  --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10) var(--zd_size25);
+  --listitem_padding: 10px 39px 10px
+    25px
+    /*rtl: 10px 25px 10px 39px*/;
 }
 [dir=rtl] .largewithTick {
-  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
+  --listitem_padding: 10px 25px 10px 39px;
 }
 .responsiveHeight {
-  --listitem_min_height: var(--zd_size45);
-  --listitem_font_size: var(--zd_font_size15);
+  --listitem_min_height: 45px;
+  --listitem_font_size: 15px;
   padding-top: var(--zd_size10) ;
   padding-bottom: var(--zd_size10) ;
 }

package/es/ListItem/ListItemWithAvatar.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 /**** Libraries ****/
 import React from 'react';
 import { Box, Container } from "../Layout";
@@ -104,7 +106,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
     } = listA11y;
     let isDarkPalette = palette === 'dark';
     let dataIdString = value ? value : dataId;
-    return /*#__PURE__*/React.createElement(ListContainer, {
+    return /*#__PURE__*/React.createElement(ListContainer, _extends({
       a11y: listA11y,
       size: size,
       palette: palette,
@@ -122,14 +124,13 @@ export default class ListItemWithAvatar extends React.PureComponent {
       eleRef: this.getRef,
       disableTitle: disableTitle,
       title: null,
-      customProps: ListItemProps,
-      ...ContainerProps
-    }, name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
+      customProps: ListItemProps
+    }, ContainerProps), name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
       className: `${style.leftAvatar} ${lhsAlignContent !== 'center' ? `${style.lhsBox}` : ''}`
     }, /*#__PURE__*/React.createElement(Box, {
       align: lhsAlignContent,
       className: style[`lhsBox_${size}`]
-    }, isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, {
+    }, isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, _extends({
       name: name,
       size: "small",
       src: imgSrc,
@@ -139,9 +140,8 @@ export default class ListItemWithAvatar extends React.PureComponent {
       customClass: {
         customAvatar: customAvatar,
         customAvatarTeam: customAvatarTeam
-      },
-      ...AvatarTeamProps
-    }) : /*#__PURE__*/React.createElement(Avatar, {
+      }
+    }, AvatarTeamProps)) : /*#__PURE__*/React.createElement(Avatar, _extends({
       name: name,
       size: "small",
       src: imgSrc,
@@ -149,9 +149,8 @@ export default class ListItemWithAvatar extends React.PureComponent {
       textPalette: isDarkPalette ? 'white' : '',
       needTitle: needAvatarTitle,
       palette: isDarkPalette ? 'info' : avatarPalette,
-      customClass: customAvatar,
-      ...AvatarProps
-    }))) : null, /*#__PURE__*/React.createElement(Box, {
+      customClass: customAvatar
+    }, AvatarProps)))) : null, /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: style.leftBox
     }, /*#__PURE__*/React.createElement(Box, {

package/es/ListItem/ListItemWithCheckBox.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from 'react';
 import ListContainer from "./ListContainer";
 import { ListItemWithCheckBoxDefaultProps } from "./props/defaultProps";
@@ -81,7 +83,7 @@ export default class ListItemWithCheckBox extends React.Component {
       customLabel = '',
       customValueRightPlaceholder = ''
     } = customClass;
-    return /*#__PURE__*/React.createElement(ListContainer, {
+    return /*#__PURE__*/React.createElement(ListContainer, _extends({
       a11y: listA11y,
       size: size,
       palette: palette,
@@ -98,9 +100,8 @@ export default class ListItemWithCheckBox extends React.Component {
       eleRef: this.getRef,
       disableTitle: disableTitle,
       title: null,
-      customProps: ListItemProps,
-      ...ContainerProps
-    }, /*#__PURE__*/React.createElement(Box, {
+      customProps: ListItemProps
+    }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
       className: `${style.iconBox} ${style.lhsBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
       dataId: `${dataId ? dataId : value}_checkBox`
     }, /*#__PURE__*/React.createElement(Box, {

package/es/ListItem/ListItemWithIcon.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 /**** Libraries ****/
 import React from 'react';
 import { Box, Container } from "../Layout";
@@ -93,7 +95,7 @@ export default class ListItemWithIcon extends React.Component {
       ariaHidden
     } = listA11y;
     let dataIdString = dataId ? `${dataId.replace("'", '_')}` : value.toLowerCase().replace("'", '_');
-    return /*#__PURE__*/React.createElement(ListContainer, {
+    return /*#__PURE__*/React.createElement(ListContainer, _extends({
       a11y: listA11y,
       size: size,
       palette: palette,
@@ -114,9 +116,8 @@ export default class ListItemWithIcon extends React.Component {
       eleRef: this.getRef,
       disableTitle: disableTitle,
       title: null,
-      customProps: ListItemProps,
-      ...ContainerProps
-    }, iconName && /*#__PURE__*/React.createElement(Box, {
+      customProps: ListItemProps
+    }, ContainerProps), iconName && /*#__PURE__*/React.createElement(Box, {
       "aria-hidden": true,
       align: lhsAlignContent,
       className: `${style.iconBox} ${style.lhsBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,

package/es/ListItem/ListItemWithRadio.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from 'react';
 import Radio from "../Radio/Radio";
 import { Box, Container } from "../Layout";
@@ -82,7 +84,7 @@ export default class ListItemWithRadio extends React.Component {
       customRadioWrap = '',
       customValueRightPlaceholder = ''
     } = customClass;
-    return /*#__PURE__*/React.createElement(ListContainer, {
+    return /*#__PURE__*/React.createElement(ListContainer, _extends({
       a11y: listA11y,
       size: size,
       palette: palette,
@@ -99,9 +101,8 @@ export default class ListItemWithRadio extends React.Component {
       eleRef: this.getRef,
       disableTitle: disableTitle,
       title: null,
-      customProps: ListItemProps,
-      ...ContainerProps
-    }, /*#__PURE__*/React.createElement(Box, {
+      customProps: ListItemProps
+    }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
       align: lhsAlignContent,
       className: `${style.iconBox} ${style.lhsBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
       dataId: `${dataId}_radio`

package/es/Modal/Modal.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 /**** Libraries ****/
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
@@ -150,10 +152,9 @@ export default class Modal extends React.Component {
       if (Element) {
         return /*#__PURE__*/React.createElement(Portal, {
           portalId: `${this.portalPrefix}${this.portalId}`
-        }, /*#__PURE__*/React.createElement(Element, {
-          ref: this.setRef,
-          ...elementProps
-        }));
+        }, /*#__PURE__*/React.createElement(Element, _extends({
+          ref: this.setRef
+        }, elementProps)));
       }
 
       return null;

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -870,6 +870,7 @@ class AdvancedGroupMultiSelect extends React.Component {
       isRestrictScroll,
       emptyMessage,
       searchEmptyMessage,
+      renderCustomEmptyState,
       title,
       variant,
       children,
@@ -1079,6 +1080,7 @@ class AdvancedGroupMultiSelect extends React.Component {
         options: revampedGroups,
         searchString: searchStr,
         suggestions: suggestionGroups,
+        renderCustomEmptyState: renderCustomEmptyState,
         dataId: dataId,
         isLoading: isFetchingOptions,
         i18nKeys: i18nKeys,

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 /**** Libraries ****/
 import React from 'react';
 import { AdvancedMultiSelect_propTypes } from "./props/propTypes";
@@ -349,6 +351,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       searchEmptyMessage,
       emptyMessage,
       noMoreOptionsMessage,
+      renderCustomEmptyState,
       dropBoxSize,
       placeHolder,
       isPopupOpen,
@@ -515,7 +518,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       let {
         tabletMode
       } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, _extends({
         animationStyle: animationStyle,
         boxPosition: position || `${defaultDropBoxPosition}Center`,
         getRef: getContainerRef,
@@ -534,11 +537,11 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
         isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
         positionsOffset: positionsOffset,
         targetOffset: targetOffset,
-        isRestrictScroll: isRestrictScroll,
-        ...DropBoxProps,
+        isRestrictScroll: isRestrictScroll
+      }, DropBoxProps, {
         alignBox: "row",
         isResponsivePadding: getFooter ? false : true
-      }, isLoading ? /*#__PURE__*/React.createElement(Container, {
+      }), isLoading ? /*#__PURE__*/React.createElement(Container, {
         align: "both",
         className: style.loader
       }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(Box, {
@@ -555,7 +558,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
         shrink: true,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
         eleRef: this.suggestionContainerRef
-      }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
+      }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
         suggestions: suggestions,
         selectedOptions: allselectedOptionIds,
         getRef: this.suggestionItemRef,
@@ -569,13 +572,13 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
         },
         dataId: `${dataIdMultiSelectComp}_Options`,
         limit: limit,
-        limitReachedMessage: limitReachedMessage,
-        ...SuggestionsProps
-      }) : /*#__PURE__*/React.createElement(EmptyState, {
+        limitReachedMessage: limitReachedMessage
+      }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,
         searchString: searchStr,
         suggestions: suggestions,
+        renderCustomEmptyState: renderCustomEmptyState,
         dataId: dataIdLoading,
         i18nKeys: i18nKeys,
         htmlId: ariaErrorId

package/es/MultiSelect/EmptyState.js

@@ -1,5 +1,6 @@
 /**** Libraries ****/
 import React from 'react';
+import { renderNode, isRenderable } from '@zohodesk/utils';
 import { EmptyState_propTypes } from "./props/propTypes";
 import { EmptyState_defaultProps } from "./props/defaultProps";
 import { MULTISELECT_I18N_KEYS } from "./constants";
@@ -17,6 +18,7 @@ export default class EmptyState extends React.PureComponent {
       searchString,
       suggestions,
       dataId,
+      renderCustomEmptyState,
       getCustomEmptyState,
       palette,
       i18nKeys,
@@ -45,13 +47,25 @@ export default class EmptyState extends React.PureComponent {
       "data-test-id": `${dataId}_srchEmptyMsg`,
       role: role,
       id: htmlId
-    }, searchEmptyText || emptyText) : options.length === 0 ? /*#__PURE__*/React.createElement("div", {
+    }, searchEmptyText || emptyText) : options.length === 0 ? isRenderable(renderCustomEmptyState) ? renderNode(renderCustomEmptyState, {
+      title: emptyText,
+      dataId,
+      role,
+      htmlId,
+      className
+    }) : /*#__PURE__*/React.createElement("div", {
       className: className,
       "data-id": `${dataId}_noOptnsMsg`,
       "data-test-id": `${dataId}_noOptnsMsg`,
       role: role,
       id: htmlId
-    }, emptyText) : /*#__PURE__*/React.createElement("div", {
+    }, emptyText) : isRenderable(renderCustomEmptyState) ? renderNode(renderCustomEmptyState, {
+      title: noMoreText || emptyText,
+      dataId,
+      role,
+      htmlId,
+      className
+    }) : /*#__PURE__*/React.createElement("div", {
       className: className,
       "data-id": `${dataId}_NoMoreOptionMsg`,
       "data-test-id": `${dataId}_NoMoreOptionMsg`,