@zohodesk/components 1.6.0 → 1.6.2

package/lib/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/lib/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/lib/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/lib/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/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -960,6 +960,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           isRestrictScroll = _this$props9.isRestrictScroll,
           emptyMessage = _this$props9.emptyMessage,
           searchEmptyMessage = _this$props9.searchEmptyMessage,
+          renderCustomEmptyState = _this$props9.renderCustomEmptyState,
           title = _this$props9.title,
           variant = _this$props9.variant,
           children = _this$props9.children,
@@ -1165,6 +1166,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           options: revampedGroups,
           searchString: searchStr,
           suggestions: suggestionGroups,
+          renderCustomEmptyState: renderCustomEmptyState,
           dataId: dataId,
           isLoading: isFetchingOptions,
           i18nKeys: i18nKeys,

package/lib/MultiSelect/AdvancedMultiSelect.js

@@ -418,6 +418,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           searchEmptyMessage = _this$props6.searchEmptyMessage,
           emptyMessage = _this$props6.emptyMessage,
           noMoreOptionsMessage = _this$props6.noMoreOptionsMessage,
+          renderCustomEmptyState = _this$props6.renderCustomEmptyState,
           dropBoxSize = _this$props6.dropBoxSize,
           placeHolder = _this$props6.placeHolder,
           isPopupOpen = _this$props6.isPopupOpen,
@@ -640,6 +641,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           options: options,
           searchString: searchStr,
           suggestions: suggestions,
+          renderCustomEmptyState: renderCustomEmptyState,
           dataId: dataIdLoading,
           i18nKeys: i18nKeys,
           htmlId: ariaErrorId

package/lib/MultiSelect/EmptyState.js

@@ -9,6 +9,8 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _utils = require("@zohodesk/utils");
+
 var _propTypes = require("./props/propTypes");
 
 var _defaultProps = require("./props/defaultProps");
@@ -62,6 +64,7 @@ var EmptyState = /*#__PURE__*/function (_React$PureComponent) {
           searchString = _this$props.searchString,
           suggestions = _this$props.suggestions,
           dataId = _this$props.dataId,
+          renderCustomEmptyState = _this$props.renderCustomEmptyState,
           getCustomEmptyState = _this$props.getCustomEmptyState,
           palette = _this$props.palette,
           i18nKeys = _this$props.i18nKeys,
@@ -90,13 +93,25 @@ var EmptyState = /*#__PURE__*/function (_React$PureComponent) {
         "data-test-id": "".concat(dataId, "_srchEmptyMsg"),
         role: role,
         id: htmlId
-      }, searchEmptyText || emptyText) : options.length === 0 ? /*#__PURE__*/_react["default"].createElement("div", {
+      }, searchEmptyText || emptyText) : options.length === 0 ? (0, _utils.isRenderable)(renderCustomEmptyState) ? (0, _utils.renderNode)(renderCustomEmptyState, {
+        title: emptyText,
+        dataId: dataId,
+        role: role,
+        htmlId: htmlId,
+        className: className
+      }) : /*#__PURE__*/_react["default"].createElement("div", {
         className: className,
         "data-id": "".concat(dataId, "_noOptnsMsg"),
         "data-test-id": "".concat(dataId, "_noOptnsMsg"),
         role: role,
         id: htmlId
-      }, emptyText) : /*#__PURE__*/_react["default"].createElement("div", {
+      }, emptyText) : (0, _utils.isRenderable)(renderCustomEmptyState) ? (0, _utils.renderNode)(renderCustomEmptyState, {
+        title: noMoreText || emptyText,
+        dataId: dataId,
+        role: role,
+        htmlId: htmlId,
+        className: className
+      }) : /*#__PURE__*/_react["default"].createElement("div", {
         className: className,
         "data-id": "".concat(dataId, "_NoMoreOptionMsg"),
         "data-test-id": "".concat(dataId, "_NoMoreOptionMsg"),

package/lib/MultiSelect/MultiSelect.js

@@ -1141,6 +1141,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           searchEmptyMessage = _this$props15.searchEmptyMessage,
           emptyMessage = _this$props15.emptyMessage,
           noMoreOptionsMessage = _this$props15.noMoreOptionsMessage,
+          renderCustomEmptyState = _this$props15.renderCustomEmptyState,
           dropBoxSize = _this$props15.dropBoxSize,
           isPopupOpen = _this$props15.isPopupOpen,
           isPopupReady = _this$props15.isPopupReady,
@@ -1276,6 +1277,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         options: options,
         searchString: searchStr,
         suggestions: suggestions,
+        renderCustomEmptyState: renderCustomEmptyState,
         dataId: dataId,
         palette: palette,
         i18nKeys: i18nKeys,

package/lib/MultiSelect/MultiSelectWithAvatar.js

@@ -126,6 +126,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
           searchEmptyMessage = _this$props.searchEmptyMessage,
           emptyMessage = _this$props.emptyMessage,
           noMoreOptionsMessage = _this$props.noMoreOptionsMessage,
+          renderCustomEmptyState = _this$props.renderCustomEmptyState,
           dropBoxSize = _this$props.dropBoxSize,
           isPopupOpen = _this$props.isPopupOpen,
           isPopupReady = _this$props.isPopupReady,
@@ -252,6 +253,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
         options: options,
         searchString: searchStr,
         suggestions: suggestions,
+        renderCustomEmptyState: renderCustomEmptyState,
         dataId: dataId,
         palette: palette,
         i18nKeys: i18nKeys,

package/lib/MultiSelect/props/propTypes.js

@@ -21,6 +21,7 @@ var EmptyState_propTypes = {
   dataId: _propTypes["default"].string,
   emptyMessage: _propTypes["default"].string,
   getCustomEmptyState: _propTypes["default"].func,
+  renderCustomEmptyState: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
   i18nKeys: _propTypes["default"].shape({
     loadingText: _propTypes["default"].string,
     emptyText: _propTypes["default"].string,
@@ -102,6 +103,7 @@ var MultiSelect_propTypes = {
   position: _propTypes["default"].string,
   prefixText: _propTypes["default"].string,
   removeClose: _propTypes["default"].func,
+  renderCustomEmptyState: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
   searchDebounceTime: _propTypes["default"].number,
   searchEmptyMessage: _propTypes["default"].string,
   selectedOptions: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])).isRequired,
@@ -265,6 +267,7 @@ var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
   placeHolder: _propTypes["default"].string,
   position: _propTypes["default"].string,
   removeClose: _propTypes["default"].func,
+  renderCustomEmptyState: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
   searchDebounceTime: _propTypes["default"].number,
   searchEmptyMessage: _propTypes["default"].string,
   selectAllText: _propTypes["default"].string,

package/lib/Provider/LibraryContext.js

@@ -46,6 +46,8 @@ var LibraryContextProvider = function LibraryContextProvider(_ref) {
       hasTagColorInheritedToText = _ref.hasTagColorInheritedToText,
       shouldIndicateSwitchState = _ref.shouldIndicateSwitchState,
       shouldStrikeThroughDisabledButton = _ref.shouldStrikeThroughDisabledButton,
+      labelRequiredType = _ref.labelRequiredType,
+      shouldHighlightRequiredLabel = _ref.shouldHighlightRequiredLabel,
       children = _ref.children;
 
   var _useState = (0, _react.useState)({
@@ -54,7 +56,9 @@ var LibraryContextProvider = function LibraryContextProvider(_ref) {
     coloredTagVariant: coloredTagVariant,
     hasTagColorInheritedToText: hasTagColorInheritedToText,
     shouldIndicateSwitchState: shouldIndicateSwitchState,
-    shouldStrikeThroughDisabledButton: shouldStrikeThroughDisabledButton
+    shouldStrikeThroughDisabledButton: shouldStrikeThroughDisabledButton,
+    labelRequiredType: labelRequiredType,
+    shouldHighlightRequiredLabel: shouldHighlightRequiredLabel
   }),
       _useState2 = _slicedToArray(_useState, 2),
       value = _useState2[0],
@@ -80,7 +84,9 @@ LibraryContextProvider.propTypes = {
   hasTagColorInheritedToText: _propTypes["default"].bool,
   direction: _propTypes["default"].string,
   shouldIndicateSwitchState: _propTypes["default"].bool,
-  shouldStrikeThroughDisabledButton: _propTypes["default"].bool
+  shouldStrikeThroughDisabledButton: _propTypes["default"].bool,
+  labelRequiredType: _propTypes["default"].oneOf(['asterisk', 'text']),
+  shouldHighlightRequiredLabel: _propTypes["default"].bool
 };
 LibraryContextProvider.defaultProps = {
   isReducedMotion: (0, _Config.getLibraryConfig)('isReducedMotion'),
@@ -88,7 +94,9 @@ LibraryContextProvider.defaultProps = {
   coloredTagVariant: 'bold',
   hasTagColorInheritedToText: true,
   shouldIndicateSwitchState: false,
-  shouldStrikeThroughDisabledButton: false
+  shouldStrikeThroughDisabledButton: false,
+  labelRequiredType: 'asterisk',
+  shouldHighlightRequiredLabel: true
 };
 var _default = LibraryContextProvider;
 exports["default"] = _default;

package/lib/Radio/Radio.module.css

@@ -1,16 +1,17 @@
 .varClass {
   /* radio default variables */
-  --radio_width: var(--zd_size16);
-  --radio_height: var(--zd_size16);
+  --radio_width: 16px;
+  --radio_height: 16px;
   --radio_bg_color: none;
   --radio_stroke_width: 2px;
   --radio_stroke_color: var(--zdt_radio_default_stroke);
   --radio_fill: none;
   --radio_inner_stroke_width: 0;
 }[dir=ltr] .varClass {
-  --radio_label_margin: 0 0 0 var(--zd_size6);
+  --radio_label_margin: 0 0 0 6px /*rtl: 0 6px 0 0*/
+  ;
 }[dir=rtl] .varClass {
-  --radio_label_margin: 0 0 0 var(--zd_size6);
+  --radio_label_margin: 0 6px 0 0;
 }
 
 .container {
@@ -48,13 +49,13 @@
 }
 
 .medium {
-  --radio_width: var(--zd_size16);
-  --radio_height: var(--zd_size16);
+  --radio_width: 16px;
+  --radio_height: 16px;
 }
 
 .small {
-  --radio_width: var(--zd_size13);
-  --radio_height: var(--zd_size13);
+  --radio_width: 13px;
+  --radio_height: 13px;
 }
 
 .medium.withSecondaryText {

package/lib/Ribbon/Ribbon.module.css

@@ -3,7 +3,7 @@
   --ribbon_padding: 0;
   --ribbon_text_color: var(--zdt_ribbon_default_text);
   --ribbon_text_transform: none;
-  --ribbon_font_size: var(--zd_font_size13);
+  --ribbon_font_size: 13px;
   --ribbon_bg_color: var(--zdt_ribbon_default_bg);
   --ribbon_box_shadow: none;
   --ribbon_border_width: 0;
@@ -13,12 +13,12 @@
   /* flag ribbon default variable */
 
   /* tag ribbon default variables */
-  --ribbon_tag_before_top: var(--zd_size3);
+  --ribbon_tag_before_top: 3px;
   --ribbon_tag_before_border_style: solid;
   --ribbon_tag_before_border_color: var(--zdt_ribbon_default_tag_border);
-  --ribbon_tag_before_width: var(--zd_size20);
-  --ribbon_tag_before_height: var(--zd_size20);
-  --ribbon_tag_before_left: calc( var(--zd_size10) * -1 );
+  --ribbon_tag_before_width: 20px;
+  --ribbon_tag_before_height: 20px;
+  --ribbon_tag_before_left: -10px;
   --ribbon_tag_before_border_radius: 3px 0 0 0;
 }[dir=ltr] .varClass {
   --ribbon_flag_border_width: 14px 12px 14px 0
@@ -28,8 +28,8 @@
     /*rtl: 1px 1px 0 0*/
   ;
 }[dir=rtl] .varClass {
-  --ribbon_flag_border_width: 14px 12px 14px 0  ;
-  --ribbon_tag_before_border_width: 1px 0 0 1px  ;
+  --ribbon_flag_border_width: 14px 0 14px 12px;
+  --ribbon_tag_before_border_width: 1px 1px 0 0;
 }
 
 /* css:lineheight-validation:ignore */
@@ -61,26 +61,26 @@
 .default {
   composes: semibold from '../common/common.module.css';
   display: block;
-  --ribbon_padding: var(--zd_size5) var(--zd_size20);
+  --ribbon_padding: 5px 20px;
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
   text-align: center;
 }
 
 .small {
-  --ribbon_font_size: var(--zd_font_size9);
+  --ribbon_font_size: 9px;
 }
 
 .medium {
-  --ribbon_font_size: var(--zd_font_size11);
+  --ribbon_font_size: 11px;
 }
 
 .large {
-  --ribbon_font_size: var(--zd_font_size13);
+  --ribbon_font_size: 13px;
 }
 
 .xlarge {
-  --ribbon_font_size: var(--zd_font_size14);
+  --ribbon_font_size: 14px;
 }
 
 .palette_default {
@@ -217,11 +217,13 @@
 }
 
 [dir=ltr] .flag {
-  --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6);
+  --ribbon_padding: 4px 24px 4px 6px
+    /*rtl: 4px 6px 4px 24px*/
+  ;
 }
 
 [dir=rtl] .flag {
-  --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6);
+  --ribbon_padding: 4px 6px 4px 24px;
 }
 
 .flag.small {
@@ -274,7 +276,7 @@
   display: block;
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
-  --ribbon_padding: var(--zd_size6) var(--zd_size10);
+  --ribbon_padding: 6px 10px;
   text-align: center;
 }
 
@@ -355,10 +357,13 @@
 }
 
 [dir=rtl] .tag {
-  border-width: 1px 0 1px 1px  ;
-  border-radius: 3px 0 0 3px  ;
+  border-width: 1px 0 1px 1px
+  ;
+  border-radius: 3px 0 0 3px
+  ;
   margin-right: var(--zd_size13) ;
-  padding: var(--zd_size6) var(--zd_size5) var(--zd_size6) var(--zd_size8) ;
+  padding: 6px 5px 6px 8px
+;
 }
 
 .tag::before {
@@ -387,13 +392,13 @@
 .box {
   display: inline-block;
   --ribbon_bg_color: var(--zdt_ribbon_white_bg);
-  --ribbon_padding: var(--zd_size5) var(--zd_size8);
+  --ribbon_padding: 5px 8px;
   border-radius: 3px;
 }
 
 .stamp {
   display: inline-block;
-  --ribbon_padding: var(--zd_size3) var(--zd_size5);
+  --ribbon_padding: 3px 5px;
   --ribbon_text_transform: uppercase;
 }
 

package/lib/Select/GroupSelect.js

@@ -637,6 +637,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           defaultDropBoxPosition = _this$props9.defaultDropBoxPosition,
           searchBoxPlaceHolder = _this$props9.searchBoxPlaceHolder,
           searchEmptyMessage = _this$props9.searchEmptyMessage,
+          renderCustomEmptyState = _this$props9.renderCustomEmptyState,
           dataId = _this$props9.dataId,
           dataIdSlctComp = _this$props9.dataIdSlctComp,
           dataIdDownIcon = _this$props9.dataIdDownIcon,
@@ -868,6 +869,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           options: revampedGroups,
           searchString: searchStr,
           suggestions: suggestionGroups,
+          renderCustomEmptyState: renderCustomEmptyState,
           dataId: dataIdSrchEmptyMsg,
           isLoading: isFetchingOptions,
           i18nKeys: i18nKeys,

package/lib/Select/Select.js

@@ -839,6 +839,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           getFooter = _this$props11.getFooter,
           getChildren = _this$props11.getChildren,
           getCustomEmptyState = _this$props11.getCustomEmptyState,
+          renderCustomEmptyState = _this$props11.renderCustomEmptyState,
           isParentBased = _this$props11.isParentBased,
           i18nKeys = _this$props11.i18nKeys,
           htmlId = _this$props11.htmlId,
@@ -1120,6 +1121,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           searchString: searchStr,
           suggestions: suggestions,
           dataId: dataId,
+          renderCustomEmptyState: renderCustomEmptyState,
           getCustomEmptyState: getCustomEmptyState ? _this7.handleGetAddNewOptionText : null,
           i18nKeys: i18nKeys,
           htmlId: ariaErrorId

package/lib/Select/SelectWithAvatar.js

@@ -184,6 +184,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           dropBoxSize = _this$props.dropBoxSize,
           emptyMessage = _this$props.emptyMessage,
           searchEmptyMessage = _this$props.searchEmptyMessage,
+          renderCustomEmptyState = _this$props.renderCustomEmptyState,
           needBorder = _this$props.needBorder,
           position = _this$props.position,
           defaultDropBoxPosition = _this$props.defaultDropBoxPosition,
@@ -386,6 +387,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           options: options,
           searchString: searchStr,
           suggestions: suggestions,
+          renderCustomEmptyState: renderCustomEmptyState,
           dataId: dataId,
           i18nKeys: i18nKeys,
           htmlId: ariaErrorId

package/lib/Select/SelectWithIcon.js

@@ -423,6 +423,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           boxSize = _this$props7.boxSize,
           dropBoxSize = _this$props7.dropBoxSize,
           emptyMessage = _this$props7.emptyMessage,
+          renderCustomEmptyState = _this$props7.renderCustomEmptyState,
           needIcon = _this$props7.needIcon,
           iconName = _this$props7.iconName,
           iconSize = _this$props7.iconSize,
@@ -613,6 +614,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           options: options,
           searchString: searchValue,
           suggestions: options,
+          renderCustomEmptyState: renderCustomEmptyState,
           dataId: dataId,
           i18nKeys: i18nKeys,
           htmlId: ariaErrorId

package/lib/Select/props/propTypes.js

@@ -77,6 +77,7 @@ var Select_propTypes = {
   placeHolder: _propTypes["default"].string,
   position: _propTypes["default"].string,
   removeClose: _propTypes["default"].func,
+  renderCustomEmptyState: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
   searchBoxPlaceHolder: _propTypes["default"].string,
   searchBoxSize: _propTypes["default"].string,
   searchDebounceTime: _propTypes["default"].number,
@@ -144,6 +145,7 @@ var GroupSelect_propTypes = {
   searchBoxPlaceHolder: _propTypes["default"].string,
   needSearch: _propTypes["default"].bool,
   searchEmptyMessage: _propTypes["default"].string,
+  renderCustomEmptyState: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
   getRef: _propTypes["default"].func,
   isDisabled: _propTypes["default"].bool,
   isReadOnly: _propTypes["default"].bool,
@@ -328,6 +330,7 @@ var SelectWithIcon_propTypes = {
   needResponsive: _propTypes["default"].bool,
   boxSize: _propTypes["default"].string,
   emptyMessage: _propTypes["default"].string,
+  renderCustomEmptyState: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
   isAbsolutePositioningNeeded: _propTypes["default"].bool,
   isRestrictScroll: _propTypes["default"].bool,
   positionsOffset: _propTypes["default"].object,