@zohodesk/components 1.6.1 → 1.6.3

package/es/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap

@@ -35,7 +35,7 @@ exports[`Suggestions Should render with renderBeforeChildren 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="titleBox shrinkOff"
+            class="titleBox   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -51,7 +51,7 @@ exports[`Suggestions Should render with renderBeforeChildren 1`] = `
               </span>
             </div>
             <div
-              class="value basisAuto shrinkOn"
+              class="selfAlign_center value basisAuto shrinkOn"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -122,13 +122,13 @@ exports[`Suggestions rendering with limit props 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="titleBox shrinkOff"
+            class="titleBox   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="value basisAuto shrinkOn"
+              class="selfAlign_center value basisAuto shrinkOn"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -160,13 +160,13 @@ exports[`Suggestions rendering with limit props 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="titleBox shrinkOff"
+            class="titleBox   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="value basisAuto shrinkOn"
+              class="selfAlign_center value basisAuto shrinkOn"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -197,13 +197,13 @@ exports[`Suggestions rendering with limit props 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="titleBox shrinkOff"
+            class="titleBox   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="value basisAuto shrinkOn"
+              class="selfAlign_center value basisAuto shrinkOn"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -232,13 +232,13 @@ exports[`Suggestions rendering with limit props 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="titleBox shrinkOff"
+            class="titleBox   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="value basisAuto shrinkOn"
+              class="selfAlign_center value basisAuto shrinkOn"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -267,13 +267,13 @@ exports[`Suggestions rendering with limit props 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="titleBox shrinkOff"
+            class="titleBox   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="value basisAuto shrinkOn"
+              class="selfAlign_center value basisAuto shrinkOn"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -302,13 +302,13 @@ exports[`Suggestions rendering with limit props 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="titleBox shrinkOff"
+            class="titleBox   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="value basisAuto shrinkOn"
+              class="selfAlign_center value basisAuto shrinkOn"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -337,13 +337,13 @@ exports[`Suggestions rendering with limit props 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="titleBox shrinkOff"
+            class="titleBox   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="value basisAuto shrinkOn"
+              class="selfAlign_center value basisAuto shrinkOn"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -372,13 +372,13 @@ exports[`Suggestions rendering with limit props 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="titleBox shrinkOff"
+            class="titleBox   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="value basisAuto shrinkOn"
+              class="selfAlign_center value basisAuto shrinkOn"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -407,13 +407,13 @@ exports[`Suggestions rendering with limit props 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="titleBox shrinkOff"
+            class="titleBox   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="value basisAuto shrinkOn"
+              class="selfAlign_center value basisAuto shrinkOn"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"

package/es/MultiSelect/props/defaultProps.js

@@ -38,6 +38,7 @@ export const AdvancedGroupMultiSelect_defaultProps = {
   palette: 'default',
   isLoading: false,
   dataSelectorId: 'advancedGroupMultiSelect',
+  customProps: {},
   allowValueFallback: true
 };
 export const AdvancedMultiSelect_defaultProps = {
@@ -169,5 +170,6 @@ export const SelectedOptions_defaultProps = {
 export const Suggestions_defaultProps = {
   a11y: {},
   isVirtualizerEnabled: false,
+  customClass: {},
   needMultiLineText: false
 };

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,
@@ -114,7 +116,8 @@ export const MultiSelect_propTypes = {
   setAriaId: PropTypes.string,
   ariaErrorId: PropTypes.string,
   customProps: PropTypes.shape({
-    TextBoxIconProps: PropTypes.object
+    TextBoxIconProps: PropTypes.object,
+    SuggestionsProps: PropTypes.object
   }),
   isFocus: PropTypes.bool,
   allowValueFallback: PropTypes.bool,
@@ -199,7 +202,11 @@ export const Suggestions_propTypes = {
   })),
   renderBeforeChildren: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   limit: PropTypes.number,
-  limitReachedMessage: PropTypes.string
+  limitReachedMessage: PropTypes.string,
+  customClass: PropTypes.shape({
+    containerClass: PropTypes.string
+  }),
+  needMultiLineText: PropTypes.bool
 };
 export const AdvancedGroupMultiSelect_propTypes = {
   animationStyle: PropTypes.string,
@@ -240,6 +247,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,
@@ -273,7 +281,10 @@ export const AdvancedGroupMultiSelect_propTypes = {
   dataSelectorId: PropTypes.string,
   isFocus: PropTypes.bool,
   allowValueFallback: PropTypes.bool,
-  limit: PropTypes.number
+  limit: PropTypes.number,
+  customProps: PropTypes.shape({
+    SuggestionsProps: PropTypes.object
+  })
 };
 export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
   selectedOptionDetails: PropTypes.string,

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,
@@ -623,7 +626,7 @@ export class GroupSelectComponent extends PureComponent {
     let {
       TextBoxIconProps = {},
       TextBoxProps = {},
-      SuggestionsProps
+      SuggestionsProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
@@ -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