@zohodesk/components 1.6.0 → 1.6.2

package/es/MultiSelect/MultiSelect.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 { MultiSelect_propTypes } from "./props/propTypes";
@@ -995,7 +997,7 @@ export class MultiSelectComponent extends React.Component {
     }, /*#__PURE__*/React.createElement("span", {
       className: ` ${style.custmSpan} ${textBoxSize === 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} ${isShowClearIcon ? style.clearIconSpace : ''}
           ${customChildrenClass ? customChildrenClass : ''}`
-    }, searchStr), /*#__PURE__*/React.createElement(TextBoxIcon, {
+    }, searchStr), /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
       isDisabled: isDisabled,
       inputRef: this.searchInputRef,
       needBorder: false,
@@ -1032,9 +1034,8 @@ export class MultiSelectComponent extends React.Component {
         isPopupOpened: isPopupReady,
         isReadOnly: isReadOnly,
         isDisabled: isDisabled
-      }) : renderCustomToggleIndicator,
-      ...TextBoxIconProps
-    }, /*#__PURE__*/React.createElement(Container, {
+      }) : renderCustomToggleIndicator
+    }, TextBoxIconProps), /*#__PURE__*/React.createElement(Container, {
       isInline: true,
       isCover: false,
       alignBox: "row",
@@ -1065,6 +1066,7 @@ export class MultiSelectComponent extends React.Component {
       searchEmptyMessage,
       emptyMessage,
       noMoreOptionsMessage,
+      renderCustomEmptyState,
       dropBoxSize,
       isPopupOpen,
       isPopupReady,
@@ -1181,7 +1183,7 @@ export class MultiSelectComponent extends React.Component {
       eleRef: this.suggestionContainerRef
     }, isSearching ? /*#__PURE__*/React.createElement("div", {
       className: style[palette]
-    }, searchText) : suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
+    }, searchText) : suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
       a11y: a11yProps,
       needBorder: false,
       key: searchStr.trim(),
@@ -1197,13 +1199,13 @@ export class MultiSelectComponent extends React.Component {
       palette: palette,
       selectedOptions: selectedOptionIds,
       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: dataId,
       palette: palette,
       i18nKeys: i18nKeys,

package/es/MultiSelect/MultiSelectWithAvatar.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 { MultiSelectWithAvatar_propTypes } from "./props/propTypes";
@@ -67,6 +69,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       searchEmptyMessage,
       emptyMessage,
       noMoreOptionsMessage,
+      renderCustomEmptyState,
       dropBoxSize,
       isPopupOpen,
       isPopupReady,
@@ -175,7 +178,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       shrink: true,
       customClass: !isModel && dropBoxSize ? style[dropBoxSize] : '',
       eleRef: this.suggestionContainerRef
-    }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
+    }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
       needTick: keepSelectedOptions,
       suggestions: suggestions,
       getRef: this.suggestionItemRef,
@@ -190,13 +193,13 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
         role: 'option'
       },
       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: dataId,
       palette: palette,
       i18nKeys: i18nKeys,

package/es/MultiSelect/SelectedOptions.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 { SelectedOptions_propTypes } from "./props/propTypes";
@@ -58,21 +60,21 @@ export default class SelectedOptions extends React.PureComponent {
           className: `${style.tag} ${style[size]}`,
           key: `${id}photoTag`,
           dataId: dataId
-        }, /*#__PURE__*/React.createElement(Tag, { ...commonProps,
+        }, /*#__PURE__*/React.createElement(Tag, _extends({}, commonProps, {
           active: highLightedSelectOptions.indexOf(id) >= 0,
           hasAvatar: true,
           imageURL: photoURL
-        }));
+        })));
       } else if (optionType === 'icon') {
         return /*#__PURE__*/React.createElement(Box, {
           className: `${style.tag} ${style[size]}`,
           key: `${id}iconTag`,
           dataId: dataId
-        }, /*#__PURE__*/React.createElement(Tag, { ...commonProps,
+        }, /*#__PURE__*/React.createElement(Tag, _extends({}, commonProps, {
           active: highLightedSelectOptions.indexOf(id) >= 0,
           iconName: icon,
           iconSize: iconSize
-        }));
+        })));
       } else if (optionType === 'custom') {
         return /*#__PURE__*/React.createElement(Box, {
           className: `${style.tag} ${style[size]}`,
@@ -98,9 +100,9 @@ export default class SelectedOptions extends React.PureComponent {
         className: `${style.tag} ${style[size]}`,
         key: `${id}tag`,
         dataId: dataId
-      }, /*#__PURE__*/React.createElement(Tag, { ...commonProps,
+      }, /*#__PURE__*/React.createElement(Tag, _extends({}, commonProps, {
         active: highLightedSelectOptions.indexOf(id) >= 0
-      }));
+      })));
     }));
   }
 

package/es/MultiSelect/Suggestions.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, { useMemo } from 'react';
 import { Suggestions_propTypes } from "./props/propTypes";
@@ -103,7 +105,7 @@ export default class Suggestions extends React.PureComponent {
     }
 
     if (optionType === 'avatar') {
-      return /*#__PURE__*/React.createElement(ListItemWithAvatar, { ...commonProps,
+      return /*#__PURE__*/React.createElement(ListItemWithAvatar, _extends({}, commonProps, {
         autoHover: false,
         getRef: getListItemRef,
         highlight: isHighlight,
@@ -123,9 +125,9 @@ export default class Suggestions extends React.PureComponent {
         palette: palette,
         a11y: list_a11y,
         secondaryValue: secondaryValue
-      });
+      }));
     } else if (optionType === 'icon') {
-      return /*#__PURE__*/React.createElement(ListItemWithIcon, { ...commonProps,
+      return /*#__PURE__*/React.createElement(ListItemWithIcon, _extends({}, commonProps, {
         autoHover: false,
         getRef: getListItemRef,
         highlight: isHighlight,
@@ -144,10 +146,10 @@ export default class Suggestions extends React.PureComponent {
         palette: palette,
         a11y: list_a11y,
         secondaryValue: secondaryValue
-      });
+      }));
     }
 
-    return /*#__PURE__*/React.createElement(ListItem, { ...commonProps,
+    return /*#__PURE__*/React.createElement(ListItem, _extends({}, commonProps, {
       autoHover: false,
       getRef: getListItemRef,
       highlight: isHighlight,
@@ -165,7 +167,7 @@ export default class Suggestions extends React.PureComponent {
       a11y: list_a11y,
       secondaryValue: secondaryValue,
       renderBeforeChildren: renderNode(renderBeforeChildren, suggestion)
-    });
+    }));
   }
 
   renderVirtualizerSuggestionListItem(_ref3) {

package/es/MultiSelect/props/propTypes.js

@@ -3,6 +3,7 @@ export const EmptyState_propTypes = {
   dataId: PropTypes.string,
   emptyMessage: PropTypes.string,
   getCustomEmptyState: PropTypes.func,
+  renderCustomEmptyState: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   i18nKeys: PropTypes.shape({
     loadingText: PropTypes.string,
     emptyText: PropTypes.string,
@@ -83,6 +84,7 @@ export const MultiSelect_propTypes = {
   position: PropTypes.string,
   prefixText: PropTypes.string,
   removeClose: PropTypes.func,
+  renderCustomEmptyState: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   searchDebounceTime: PropTypes.number,
   searchEmptyMessage: PropTypes.string,
   selectedOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired,
@@ -240,6 +242,7 @@ export const AdvancedGroupMultiSelect_propTypes = {
   placeHolder: PropTypes.string,
   position: PropTypes.string,
   removeClose: PropTypes.func,
+  renderCustomEmptyState: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   searchDebounceTime: PropTypes.number,
   searchEmptyMessage: PropTypes.string,
   selectAllText: PropTypes.string,

package/es/Provider/LibraryContext.js

@@ -11,6 +11,8 @@ const LibraryContextProvider = _ref => {
     hasTagColorInheritedToText,
     shouldIndicateSwitchState,
     shouldStrikeThroughDisabledButton,
+    labelRequiredType,
+    shouldHighlightRequiredLabel,
     children
   } = _ref;
   const [value, setValue] = useState({
@@ -19,7 +21,9 @@ const LibraryContextProvider = _ref => {
     coloredTagVariant,
     hasTagColorInheritedToText,
     shouldIndicateSwitchState,
-    shouldStrikeThroughDisabledButton
+    shouldStrikeThroughDisabledButton,
+    labelRequiredType,
+    shouldHighlightRequiredLabel
   });
 
   function setGlobalContext(key, data) {
@@ -44,7 +48,9 @@ LibraryContextProvider.propTypes = {
   hasTagColorInheritedToText: PropTypes.bool,
   direction: PropTypes.string,
   shouldIndicateSwitchState: PropTypes.bool,
-  shouldStrikeThroughDisabledButton: PropTypes.bool
+  shouldStrikeThroughDisabledButton: PropTypes.bool,
+  labelRequiredType: PropTypes.oneOf(['asterisk', 'text']),
+  shouldHighlightRequiredLabel: PropTypes.bool
 };
 LibraryContextProvider.defaultProps = {
   isReducedMotion: getLibraryConfig('isReducedMotion'),
@@ -52,6 +58,8 @@ LibraryContextProvider.defaultProps = {
   coloredTagVariant: 'bold',
   hasTagColorInheritedToText: true,
   shouldIndicateSwitchState: false,
-  shouldStrikeThroughDisabledButton: false
+  shouldStrikeThroughDisabledButton: false,
+  labelRequiredType: 'asterisk',
+  shouldHighlightRequiredLabel: true
 };
 export default LibraryContextProvider;

package/es/Radio/Radio.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'] }] */
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
@@ -78,7 +80,7 @@ export default class Radio extends React.Component {
       LabelProps = {},
       secondaryTextProps = {}
     } = customProps;
-    return /*#__PURE__*/React.createElement(Container, {
+    return /*#__PURE__*/React.createElement(Container, _extends({
       dataId: value ? value.toLowerCase() : 'RadioComp',
       isCover: false,
       isInline: text ? false : true,
@@ -94,9 +96,8 @@ export default class Radio extends React.Component {
       "aria-Hidden": ariaHidden,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledby,
-      "aria-readonly": ariaReadonly,
-      ...ContainerProps
-    }, /*#__PURE__*/React.createElement(Box, {
+      "aria-readonly": ariaReadonly
+    }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
       className: `${style.radio} ${checked ? `${style[`rdBox${palette}`]}` : ''} 
             ${!isEditable ? '' : `${style[`hover${palette}`]}`} ${style[size]} ${isFilled ? style.filled : ''} ${style[`centerPath${palette}`]} ${customRadio} ${!isEditable ? `${style.disabled}` : ''} ${secondaryText ? style.withSecondaryText : ''}`,
       align: secondaryText ? "start" : undefined
@@ -123,7 +124,7 @@ export default class Radio extends React.Component {
     }) : null))), (text || secondaryText) && /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: style.labelContainer
-    }, text && /*#__PURE__*/React.createElement(Label, {
+    }, text && /*#__PURE__*/React.createElement(Label, _extends({
       text: text,
       palette: labelPalette,
       size: labelSize,
@@ -133,15 +134,14 @@ export default class Radio extends React.Component {
       variant: variant,
       title: toolTip ? toolTip : text,
       customClass: `${checked && active ? `${style[`${palette}checkedActive`]}` : ''} ${disabled ? `${style.disabled}` : ''}
-                  ${style[`${palette}Label`]} ${isEditable ? style.pointer : ''} ${isReadOnly ? style.readonly : ''}  ${customLabel}`,
-      ...LabelProps
-    }), secondaryText ? /*#__PURE__*/React.createElement(Typography, {
+                  ${style[`${palette}Label`]} ${isEditable ? style.pointer : ''} ${isReadOnly ? style.readonly : ''}  ${customLabel}`
+    }, LabelProps)), secondaryText ? /*#__PURE__*/React.createElement(Typography, _extends({
       $ui_size: "12",
-      $ui_lineHeight: "1.2",
-      ...secondaryTextProps,
+      $ui_lineHeight: "1.2"
+    }, secondaryTextProps, {
       $i18n_dataTitle: toolTip ? null : secondaryText,
       $ui_className: `${style.secondaryText} ${customSecondaryText}`
-    }, secondaryText) : null), children, renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
+    }), secondaryText) : null), children, renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
   }
 
 }

package/es/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/es/ResponsiveDropBox/ResponsiveDropBox.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, { Component } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
@@ -43,9 +45,9 @@ export default class ResponsiveDropBox extends Component {
       customMobileDropBoxWrap: `${customMobileDropBoxWrap}`,
       customResponsiveContainer: `${customResponsiveContainer}`
     };
-    return /*#__PURE__*/React.createElement(DropBox, { ...this.props,
+    return /*#__PURE__*/React.createElement(DropBox, _extends({}, this.props, {
       customClass: dropBoxClasses
-    }, /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+    }), /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
     }, _ref2 => {

package/es/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/es/Select/GroupSelect.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, { PureComponent } from 'react';
 import { GroupSelect_defaultProps } from "./props/defaultProps";
@@ -559,6 +561,7 @@ export class GroupSelectComponent extends PureComponent {
       defaultDropBoxPosition,
       searchBoxPlaceHolder,
       searchEmptyMessage,
+      renderCustomEmptyState,
       dataId,
       dataIdSlctComp,
       dataIdDownIcon,
@@ -637,7 +640,7 @@ export class GroupSelectComponent extends PureComponent {
       ref: getTargetRef,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`
-    }, children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, needSelectDownIcon ? /*#__PURE__*/React.createElement(TextBoxIcon, {
+    }, children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, needSelectDownIcon ? /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
       isDisabled: isDisabled,
       iconRotated: isPopupOpen,
       inputRef: this.valueInputRef,
@@ -667,16 +670,15 @@ export class GroupSelectComponent extends PureComponent {
       },
       i18nKeys: TextBoxIcon_i18n,
       isFocus: isPopupReady,
-      autoComplete: false,
-      ...TextBoxIconProps
-    }, /*#__PURE__*/React.createElement(Container, {
+      autoComplete: false
+    }, TextBoxIconProps), /*#__PURE__*/React.createElement(Container, {
       align: "both",
       dataId: dataIdDownIcon
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-down",
       size: "7",
       iconClass: style.arrowIcon
-    }))) : /*#__PURE__*/React.createElement(Textbox, {
+    }))) : /*#__PURE__*/React.createElement(Textbox, _extends({
       isDisabled: isDisabled,
       inputRef: this.valueInputRef,
       maxLength: maxLength,
@@ -705,9 +707,8 @@ export class GroupSelectComponent extends PureComponent {
         ariaOwns: setAriaId
       },
       autoComplete: false,
-      isFocus: isPopupReady,
-      ...TextBoxProps
-    }))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+      isFocus: isPopupReady
+    }, TextBoxProps)))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
     }, _ref2 => {
@@ -777,7 +778,7 @@ export class GroupSelectComponent extends PureComponent {
           a11y: {
             role: 'heading'
           }
-        })), /*#__PURE__*/React.createElement(Suggestions, {
+        })), /*#__PURE__*/React.createElement(Suggestions, _extends({
           activeId: selectedId,
           suggestions: options,
           getRef: this.suggestionItemRef,
@@ -792,13 +793,13 @@ export class GroupSelectComponent extends PureComponent {
             ariaParentRole: 'listbox',
             role: 'option'
           },
-          dataId: `${dataId}_Options`,
-          ...SuggestionsProps
-        }));
+          dataId: `${dataId}_Options`
+        }, SuggestionsProps)));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,
         searchString: searchStr,
         suggestions: suggestionGroups,
+        renderCustomEmptyState: renderCustomEmptyState,
         dataId: dataIdSrchEmptyMsg,
         isLoading: isFetchingOptions,
         i18nKeys: i18nKeys,

package/es/Select/Select.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, { Component } from 'react';
 import { Select_defaultProps } from "./props/defaultProps";
@@ -790,6 +792,7 @@ export class SelectComponent extends Component {
       getFooter,
       getChildren,
       getCustomEmptyState,
+      renderCustomEmptyState,
       isParentBased,
       i18nKeys,
       htmlId,
@@ -855,10 +858,10 @@ export class SelectComponent extends Component {
       ref: getTargetRef,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`
-    }, isRenderable(renderCustomSelectedValue) ? /*#__PURE__*/React.createElement(InputFieldLine, {
+    }, isRenderable(renderCustomSelectedValue) ? /*#__PURE__*/React.createElement(InputFieldLine, _extends({
       border: needBorder ? 'bottom' : 'none',
-      hasPadding: true,
-      ...InputFieldLineProps,
+      hasPadding: true
+    }, InputFieldLineProps, {
       isActive: isPopupReady,
       size: size,
       borderColor: borderColor,
@@ -866,7 +869,7 @@ export class SelectComponent extends Component {
       isReadOnly: isReadOnly,
       onKeyDown: this.handleKeyDown,
       a11yAttributes: inputFieldLineA11yAttributes
-    }, renderNode(renderCustomSelectedValue, {
+    }), renderNode(renderCustomSelectedValue, {
       isDisabled,
       isPopupOpen,
       isReadOnly,
@@ -882,7 +885,7 @@ export class SelectComponent extends Component {
       onKeyDown: this.handleKeyDown,
       onKeyPress: this.handleValueInputChange,
       ariaControlsId: setAriaId
-    })) : needSelectDownIcon ? /*#__PURE__*/React.createElement(TextBoxIcon, {
+    })) : needSelectDownIcon ? /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
       a11y: {
         role: 'Menuitem',
         ariaLabel: TextBox_ally_label,
@@ -930,9 +933,8 @@ export class SelectComponent extends Component {
         isPopupOpened: isPopupReady,
         isReadOnly: isReadOnly,
         isDisabled: isDisabled
-      }) : renderCustomToggleIndicator,
-      ...TextBoxIconProps
-    }, !renderCustomToggleIndicator || children ? /*#__PURE__*/React.createElement(Container, {
+      }) : renderCustomToggleIndicator
+    }, TextBoxIconProps), !renderCustomToggleIndicator || children ? /*#__PURE__*/React.createElement(Container, {
       isInline: true,
       isCover: false,
       alignBox: "row",
@@ -1047,7 +1049,7 @@ export class SelectComponent extends Component {
         shrink: true,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
         eleRef: this.suggestionContainerRef
-      }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
+      }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
         key: searchStr.trim(),
         activeId: selectedId,
         isVirtualizerEnabled: isVirtualizerEnabled,
@@ -1068,14 +1070,14 @@ export class SelectComponent extends Component {
         a11y: {
           ariaParentRole: 'listbox',
           role: 'option'
-        },
-        ...SuggestionsProps
-      }) : /*#__PURE__*/React.createElement(EmptyState, {
+        }
+      }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,
         searchString: searchStr,
         suggestions: suggestions,
         dataId: dataId,
+        renderCustomEmptyState: renderCustomEmptyState,
         getCustomEmptyState: getCustomEmptyState ? this.handleGetAddNewOptionText : null,
         i18nKeys: i18nKeys,
         htmlId: ariaErrorId