@zohodesk/components 1.0.0-temp-252 → 1.0.0-temp-253

package/README.md

@@ -1,9 +1,6 @@
 # DOT Style Guide
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
-# 1.6.12
-
-- Added support for custom component suggestion status in SelectDropdown.
 
 # 1.6.12
 

package/es/DropBox/DropBoxElement/DropBoxElement.js

@@ -27,6 +27,7 @@ export default function DropBoxElement(props) {
     tabIndex,
     palette,
     subContainerRef,
+    getSubContainerRef,
     customStyle,
     animationStyle
   } = props;
@@ -54,6 +55,14 @@ export default function DropBoxElement(props) {
     }
   };
 
+  const setSubContainerRef = ele => {
+    if (subContainerRef) {
+      subContainerRef.current = ele;
+    }
+
+    getSubContainerRef && getSubContainerRef(ele);
+  };
+
   if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
     isAbsolute = true;
   }
@@ -120,7 +129,7 @@ export default function DropBoxElement(props) {
     "data-id": `${dataId}_subcontainer`,
     "data-test-id": `${dataId}_subcontainer`,
     "data-selector-id": `${dataSelectorId}_subcontainer`,
-    ref: subContainerRef
+    ref: setSubContainerRef
   }, isModel ? /*#__PURE__*/React.createElement("div", {
     className: style.closeBar
   }) : null, isArrow && !isModel && /*#__PURE__*/React.createElement("div", {

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

@@ -13,9 +13,13 @@
 
 .subContainer {
     position: relative;
+    display: flex;
+    flex-direction: column;
+    /* overflow: hidden; */
     border-radius: var(--dropbox_border_radius);
     padding: var(--dropbox_padding);
     box-shadow: var(--dropbox_box_shadow);
+
 }
 
 .defaultPalette,
@@ -430,8 +434,8 @@
     height: 6px;
     /*css:theme-validation:ignore*/
     width: 20% ;
-    margin-block:0 var(--zd_size10) ;
-    margin-inline:auto ;
+    margin-block: 0 var(--zd_size10) ;
+    margin-inline: auto ;
     border-radius: 5px;
     background-color: var(--dropbox_mob_close_bg_color);
     cursor: pointer;
@@ -443,4 +447,4 @@
 
 .darkPalette {
     --dropbox_bg_color: var(--zdt_dropbox_dark_bg);
-}
+}

package/es/DropBox/DropBoxElement/props/propTypes.js

@@ -47,5 +47,6 @@ export const DropBoxElementPropTypes = {
   positionsOffset: PropTypes.object,
   targetOffset: PropTypes.object,
   zIndexStyle: PropTypes.object,
-  subContainerRef: PropTypes.func
+  subContainerRef: PropTypes.func,
+  getSubContainerRef: PropTypes.func
 };

package/es/ResponsiveDropBox/ResponsiveDropBox.js

@@ -57,6 +57,7 @@ export default class ResponsiveDropBox extends Component {
       return /*#__PURE__*/React.createElement(Container, {
         alignBox: alignBox,
         isCover: false,
+        flexible: true,
         className: `${tabletMode ? style.dropBoxContainer : ''} ${tabletMode && isResponsivePadding ? style.boxPadding : ''} ${customResponsiveContainer}`
       }, children);
     }));

package/es/Select/Select.js

@@ -813,8 +813,7 @@ export class SelectComponent extends Component {
       renderCustomSearchClearComponent,
       renderCustomSelectedValue,
       inputFieldLineA11y,
-      customClass,
-      renderSuggestedStatus
+      customClass
     } = this.props;
     let {
       TextBoxIcon_i18n,
@@ -845,8 +844,7 @@ export class SelectComponent extends Component {
     } = customProps;
     const {
       dropBox: dropBoxClass = '',
-      cardContent: cardContentClass = '',
-      suggestedStatusWrapper = ''
+      cardContent: cardContentClass = ''
     } = customClass;
     const inputFieldLineA11yAttributes = this.getInputFieldLineA11y({
       setAriaId,
@@ -1023,90 +1021,81 @@ export class SelectComponent extends Component {
         isRestrictScroll: isRestrictScroll,
         portalId: dropBoxPortalId,
         customClass: {
-          customDropBox: `${dropBoxClass} ${renderSuggestedStatus ? style.dropBoxWithSuggestedStatus : ''}`
+          customDropBox: dropBoxClass
         }
-      }, (() => {
-        const dropdownContent = isLoading ? /*#__PURE__*/React.createElement(Container, {
-          align: "both",
-          className: style.loader
-        }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, !getChildren ? /*#__PURE__*/React.createElement(Box, {
-          flexible: true
-        }, /*#__PURE__*/React.createElement(Card, {
-          onScroll: this.handleScroll
-        }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
-          className: `${style.search} ${style[size]}`
-        }, /*#__PURE__*/React.createElement(TextBoxIcon, {
-          a11y: {
-            ariaControls: setAriaId,
-            ariaAutocomplete: 'list',
-            ariaDescribedby: ariaErrorId
-          },
-          inputRef: this.searchInputRef,
-          maxLength: maxLength,
-          onChange: this.handleSearch,
-          onKeyDown: this.handleKeyDown,
-          placeHolder: searchBoxPlaceHolder,
-          size: searchBoxSize,
-          value: searchStr,
-          onClear: this.handleClearSearch,
-          dataId: `${dataId}_search`,
-          i18nKeys: TextBoxIcon_i18n,
-          autoComplete: autoComplete,
-          customProps: {
-            TextBoxProps: DropdownSearchTextBoxProps
-          },
-          renderCustomClearComponent: renderCustomSearchClearComponent
-        }))) : null, /*#__PURE__*/React.createElement(CardContent, {
-          shrink: true,
-          customClass: `
+      }, isLoading ? /*#__PURE__*/React.createElement(Container, {
+        align: "both",
+        className: style.loader
+      }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, !getChildren ? /*#__PURE__*/React.createElement(Box, {
+        flexible: true
+      }, /*#__PURE__*/React.createElement(Card, {
+        onScroll: this.handleScroll
+      }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
+        className: `${style.search} ${style[size]}`
+      }, /*#__PURE__*/React.createElement(TextBoxIcon, {
+        a11y: {
+          ariaControls: setAriaId,
+          ariaAutocomplete: 'list',
+          ariaDescribedby: ariaErrorId
+        },
+        inputRef: this.searchInputRef,
+        maxLength: maxLength,
+        onChange: this.handleSearch,
+        onKeyDown: this.handleKeyDown,
+        placeHolder: searchBoxPlaceHolder,
+        size: searchBoxSize,
+        value: searchStr,
+        onClear: this.handleClearSearch,
+        dataId: `${dataId}_search`,
+        i18nKeys: TextBoxIcon_i18n,
+        autoComplete: autoComplete,
+        customProps: {
+          TextBoxProps: DropdownSearchTextBoxProps
+        },
+        renderCustomClearComponent: renderCustomSearchClearComponent
+      }))) : null, /*#__PURE__*/React.createElement(CardContent, {
+        shrink: true,
+        customClass: `
                               ${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''} ${cardContentClass}`,
-          eleRef: this.suggestionContainerRef
-        }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
-          key: searchStr.trim(),
-          activeId: selectedId,
-          isVirtualizerEnabled: isVirtualizerEnabled,
-          getVirtualizerPublicMethods: this.getVirtualizerPublicMethods,
-          setVirtualizerContainerRefFunction: this.setSuggestionsVirtualizerContainerRefFunction,
-          suggestions: suggestions,
-          getRef: this.suggestionItemRef,
-          hoverOption: hoverIndex,
-          onClick: this.handleChange,
-          onMouseEnter: this.handleMouseEnter,
-          dataId: `${dataId}_Options`,
-          needTick: needTick,
-          needBorder: needListBorder,
-          selectedOptions: [selectedId],
-          className: `${tabletMode ? style.responsivelistItemContainer : style.listItemContainer}`,
-          listItemSize: listItemSize,
-          htmlId: setAriaId,
-          a11y: {
-            ariaParentRole: 'listbox',
-            role: 'option'
-          }
-        }, 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
-        }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
-          isCover: false,
-          align: "both"
-        }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)) : /*#__PURE__*/React.createElement(Box, {
-          flexible: true
-        }, getChildren()));
-        return renderSuggestedStatus ? /*#__PURE__*/React.createElement("div", {
-          className: style.dropBoxListContainer
-        }, /*#__PURE__*/React.createElement("div", {
-          className: `${suggestedStatusWrapper} ${style.suggestedStatusContainer}`
-        }, renderSuggestedStatus), /*#__PURE__*/React.createElement("div", {
-          className: style.dropdownOptions
-        }, dropdownContent)) : dropdownContent;
-      })());
+        eleRef: this.suggestionContainerRef
+      }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
+        key: searchStr.trim(),
+        activeId: selectedId,
+        isVirtualizerEnabled: isVirtualizerEnabled,
+        getVirtualizerPublicMethods: this.getVirtualizerPublicMethods,
+        setVirtualizerContainerRefFunction: this.setSuggestionsVirtualizerContainerRefFunction,
+        suggestions: suggestions,
+        getRef: this.suggestionItemRef,
+        hoverOption: hoverIndex,
+        onClick: this.handleChange,
+        onMouseEnter: this.handleMouseEnter,
+        dataId: `${dataId}_Options`,
+        needTick: needTick,
+        needBorder: needListBorder,
+        selectedOptions: [selectedId],
+        className: `${tabletMode ? style.responsivelistItemContainer : style.listItemContainer}`,
+        listItemSize: listItemSize,
+        htmlId: setAriaId,
+        a11y: {
+          ariaParentRole: 'listbox',
+          role: 'option'
+        }
+      }, 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
+      }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+        isCover: false,
+        align: "both"
+      }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)) : /*#__PURE__*/React.createElement(Box, {
+        flexible: true
+      }, getChildren())));
     }) : null);
   }
 

package/es/Select/Select.module.css

@@ -22,12 +22,12 @@
 
 .box_small .emptyState {
   padding-block: var(--zd_size12) ;
-  padding-inline: var(--zd_size6) ;
+  padding-inline:var(--zd_size6) ;
 }
 
 .box_medium .emptyState {
   padding-block: var(--zd_size12) ;
-  padding-inline: var(--zd_size15) ;
+  padding-inline:var(--zd_size15) ;
 }
 
 .hide {
@@ -37,7 +37,6 @@
 .container {
   position: relative;
 }
-
 /* css:lineheight-validation:ignore */
 .arrowIcon {
   height: var(--zd_size8) ;
@@ -46,12 +45,12 @@
 
 .small.search {
   padding-block: 0 ;
-  padding-inline: var(--zd_size5) ;
+  padding-inline:var(--zd_size5) ;
 }
 
 .medium.search {
   padding-block: var(--zd_size3) 0 ;
-  padding-inline: var(--zd_size20) ;
+  padding-inline:var(--zd_size20) ;
 }
 
 .title {
@@ -60,17 +59,17 @@
 
 .groupTitle {
   margin-block: var(--zd_size6) ;
-  margin-inline: 0 ;
+  margin-inline:0 ;
 }
 
 .listItemContainer {
   padding-block: var(--zd_size10) ;
-  padding-inline: 0 ;
+  padding-inline:0 ;
 }
 
 .responsivelistItemContainer {
   padding-block: var(--zd_size10) 0 ;
-  padding-inline: 0 ;
+  padding-inline:0 ;
 }
 
 .readonly {
@@ -112,19 +111,18 @@
 
 .dropBoxList {
   padding-block: var(--zd_size10) ;
-  padding-inline: 0 ;
+  padding-inline:0 ;
 }
 
 .responsivedropBoxList {
   padding-block: var(--zd_size10) 0 ;
-  padding-inline: 0 ;
+  padding-inline:0 ;
 }
 
 .rotate {
   transform: rotateX(180deg);
 }
-
-.rightPlaceholder {
+.rightPlaceholder{
   height: 100% ;
 }
 
@@ -143,29 +141,3 @@
 .loader {
   padding: var(--zd_size10) ;
 }
-
-.dropBoxWithSuggestedStatus {
-  border-radius: 7px;
-}
-
-.dropBoxListContainer {
-  width: 100% ;
-  border-radius: 7px;
-  padding: var(--zd_size10) ;
-  border: 1px solid var(--zdt_statusdropdown_wrapper_container_border);
-  background: var(--zdt_statusdropdown_wrapper_container_bg);
-  box-shadow: var(--zd_bs_statusdropdown_wrapper_container);
-}
-
-.dropdownOptions {
-  padding-inline: var(--zd_size1) ;
-  padding-block: var(--zd_size1) ;
-  background-color: var(--zdt_commentList_normal_bg);
-  border: 1px solid var(--zdt_statusdropdown_wrapper_container_border);
-  border-radius: 7px;
-}
-
-.suggestedStatusContainer {
-  margin-block-end: var(--zd_size6) ;
-  margin-inline: var(--zd_size1) ;
-}

package/es/Select/props/defaultProps.js

@@ -38,8 +38,7 @@ export const Select_defaultProps = {
   isAbsolutePositioningNeeded: true,
   allowValueFallback: true,
   inputFieldLineA11y: {},
-  customClass: {},
-  renderSuggestedStatus: null
+  customClass: {}
 };
 export const GroupSelect_defaultProps = {
   animationStyle: 'bounce',

package/es/Select/props/propTypes.js

@@ -108,8 +108,7 @@ export const Select_propTypes = {
   customClass: PropTypes.shape({
     dropBox: PropTypes.string,
     cardContent: PropTypes.string
-  }),
-  renderSuggestedStatus: PropTypes.node
+  })
 };
 export const GroupSelect_propTypes = {
   groupedOptions: PropTypes.arrayOf(PropTypes.shape({

package/lib/DropBox/DropBoxElement/DropBoxElement.js

@@ -43,6 +43,7 @@ function DropBoxElement(props) {
       tabIndex = props.tabIndex,
       palette = props.palette,
       subContainerRef = props.subContainerRef,
+      getSubContainerRef = props.getSubContainerRef,
       customStyle = props.customStyle,
       animationStyle = props.animationStyle;
   var isAbsolute = isAbsolutePositioningNeeded;
@@ -67,6 +68,14 @@ function DropBoxElement(props) {
     }
   };
 
+  var setSubContainerRef = function setSubContainerRef(ele) {
+    if (subContainerRef) {
+      subContainerRef.current = ele;
+    }
+
+    getSubContainerRef && getSubContainerRef(ele);
+  };
+
   if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
     isAbsolute = true;
   }
@@ -132,7 +141,7 @@ function DropBoxElement(props) {
     "data-id": "".concat(dataId, "_subcontainer"),
     "data-test-id": "".concat(dataId, "_subcontainer"),
     "data-selector-id": "".concat(dataSelectorId, "_subcontainer"),
-    ref: subContainerRef
+    ref: setSubContainerRef
   }, isModel ? /*#__PURE__*/_react["default"].createElement("div", {
     className: _DropBoxElementModule["default"].closeBar
   }) : null, isArrow && !isModel && /*#__PURE__*/_react["default"].createElement("div", {

package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -13,9 +13,13 @@
 
 .subContainer {
     position: relative;
+    display: flex;
+    flex-direction: column;
+    /* overflow: hidden; */
     border-radius: var(--dropbox_border_radius);
     padding: var(--dropbox_padding);
     box-shadow: var(--dropbox_box_shadow);
+
 }
 
 .defaultPalette,
@@ -430,8 +434,8 @@
     height: 6px;
     /*css:theme-validation:ignore*/
     width: 20% ;
-    margin-block:0 var(--zd_size10) ;
-    margin-inline:auto ;
+    margin-block: 0 var(--zd_size10) ;
+    margin-inline: auto ;
     border-radius: 5px;
     background-color: var(--dropbox_mob_close_bg_color);
     cursor: pointer;
@@ -443,4 +447,4 @@
 
 .darkPalette {
     --dropbox_bg_color: var(--zdt_dropbox_dark_bg);
-}
+}

package/lib/DropBox/DropBoxElement/props/propTypes.js

@@ -57,6 +57,7 @@ var DropBoxElementPropTypes = {
   positionsOffset: _propTypes["default"].object,
   targetOffset: _propTypes["default"].object,
   zIndexStyle: _propTypes["default"].object,
-  subContainerRef: _propTypes["default"].func
+  subContainerRef: _propTypes["default"].func,
+  getSubContainerRef: _propTypes["default"].func
 };
 exports.DropBoxElementPropTypes = DropBoxElementPropTypes;

package/lib/ResponsiveDropBox/ResponsiveDropBox.js

@@ -110,6 +110,7 @@ var ResponsiveDropBox = /*#__PURE__*/function (_Component) {
         return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           alignBox: alignBox,
           isCover: false,
+          flexible: true,
           className: "".concat(tabletMode ? _ResponsiveDropBoxModule["default"].dropBoxContainer : '', " ").concat(tabletMode && isResponsivePadding ? _ResponsiveDropBoxModule["default"].boxPadding : '', " ").concat(customResponsiveContainer)
         }, children);
       }));

package/lib/Select/Select.js

@@ -860,8 +860,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           renderCustomSearchClearComponent = _this$props11.renderCustomSearchClearComponent,
           renderCustomSelectedValue = _this$props11.renderCustomSelectedValue,
           inputFieldLineA11y = _this$props11.inputFieldLineA11y,
-          customClass = _this$props11.customClass,
-          renderSuggestedStatus = _this$props11.renderSuggestedStatus;
+          customClass = _this$props11.customClass;
       var _i18nKeys = i18nKeys,
           TextBoxIcon_i18n = _i18nKeys.TextBoxIcon_i18n,
           _i18nKeys$TextBox_all = _i18nKeys.TextBox_ally_label,
@@ -894,9 +893,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
       var _customClass$dropBox = customClass.dropBox,
           dropBoxClass = _customClass$dropBox === void 0 ? '' : _customClass$dropBox,
           _customClass$cardCont = customClass.cardContent,
-          cardContentClass = _customClass$cardCont === void 0 ? '' : _customClass$cardCont,
-          _customClass$suggeste = customClass.suggestedStatusWrapper,
-          suggestedStatusWrapper = _customClass$suggeste === void 0 ? '' : _customClass$suggeste;
+          cardContentClass = _customClass$cardCont === void 0 ? '' : _customClass$cardCont;
       var inputFieldLineA11yAttributes = this.getInputFieldLineA11y({
         setAriaId: setAriaId,
         isReadOnly: isReadOnly,
@@ -1068,89 +1065,80 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           isRestrictScroll: isRestrictScroll,
           portalId: dropBoxPortalId,
           customClass: {
-            customDropBox: "".concat(dropBoxClass, " ").concat(renderSuggestedStatus ? _SelectModule["default"].dropBoxWithSuggestedStatus : '')
+            customDropBox: dropBoxClass
           }
-        }, function () {
-          var dropdownContent = isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-            align: "both",
-            className: _SelectModule["default"].loader
-          }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !getChildren ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-            flexible: true
-          }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
-            onScroll: _this7.handleScroll
-          }, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement("div", {
-            className: "".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size])
-          }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
-            a11y: {
-              ariaControls: setAriaId,
-              ariaAutocomplete: 'list',
-              ariaDescribedby: ariaErrorId
-            },
-            inputRef: _this7.searchInputRef,
-            maxLength: maxLength,
-            onChange: _this7.handleSearch,
-            onKeyDown: _this7.handleKeyDown,
-            placeHolder: searchBoxPlaceHolder,
-            size: searchBoxSize,
-            value: searchStr,
-            onClear: _this7.handleClearSearch,
-            dataId: "".concat(dataId, "_search"),
-            i18nKeys: TextBoxIcon_i18n,
-            autoComplete: autoComplete,
-            customProps: {
-              TextBoxProps: DropdownSearchTextBoxProps
-            },
-            renderCustomClearComponent: renderCustomSearchClearComponent
-          }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
-            shrink: true,
-            customClass: "\n                              ".concat(!tabletMode && dropBoxSize ? _SelectModule["default"][dropBoxSize] : '', " ").concat(cardContentClass),
-            eleRef: _this7.suggestionContainerRef
-          }, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
-            key: searchStr.trim(),
-            activeId: selectedId,
-            isVirtualizerEnabled: isVirtualizerEnabled,
-            getVirtualizerPublicMethods: _this7.getVirtualizerPublicMethods,
-            setVirtualizerContainerRefFunction: _this7.setSuggestionsVirtualizerContainerRefFunction,
-            suggestions: suggestions,
-            getRef: _this7.suggestionItemRef,
-            hoverOption: hoverIndex,
-            onClick: _this7.handleChange,
-            onMouseEnter: _this7.handleMouseEnter,
-            dataId: "".concat(dataId, "_Options"),
-            needTick: needTick,
-            needBorder: needListBorder,
-            selectedOptions: [selectedId],
-            className: "".concat(tabletMode ? _SelectModule["default"].responsivelistItemContainer : _SelectModule["default"].listItemContainer),
-            listItemSize: listItemSize,
-            htmlId: setAriaId,
-            a11y: {
-              ariaParentRole: 'listbox',
-              role: 'option'
-            }
-          }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
-            isLoading: isFetchingOptions,
-            options: options,
-            searchString: searchStr,
-            suggestions: suggestions,
-            dataId: dataId,
-            renderCustomEmptyState: renderCustomEmptyState,
-            getCustomEmptyState: getCustomEmptyState ? _this7.handleGetAddNewOptionText : null,
-            i18nKeys: i18nKeys,
-            htmlId: ariaErrorId
-          }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-            isCover: false,
-            align: "both"
-          }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter()) : null)) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-            flexible: true
-          }, getChildren()));
-          return renderSuggestedStatus ? /*#__PURE__*/_react["default"].createElement("div", {
-            className: _SelectModule["default"].dropBoxListContainer
-          }, /*#__PURE__*/_react["default"].createElement("div", {
-            className: "".concat(suggestedStatusWrapper, " ").concat(_SelectModule["default"].suggestedStatusContainer)
-          }, renderSuggestedStatus), /*#__PURE__*/_react["default"].createElement("div", {
-            className: _SelectModule["default"].dropdownOptions
-          }, dropdownContent)) : dropdownContent;
-        }());
+        }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+          align: "both",
+          className: _SelectModule["default"].loader
+        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !getChildren ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          flexible: true
+        }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+          onScroll: _this7.handleScroll
+        }, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement("div", {
+          className: "".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size])
+        }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
+          a11y: {
+            ariaControls: setAriaId,
+            ariaAutocomplete: 'list',
+            ariaDescribedby: ariaErrorId
+          },
+          inputRef: _this7.searchInputRef,
+          maxLength: maxLength,
+          onChange: _this7.handleSearch,
+          onKeyDown: _this7.handleKeyDown,
+          placeHolder: searchBoxPlaceHolder,
+          size: searchBoxSize,
+          value: searchStr,
+          onClear: _this7.handleClearSearch,
+          dataId: "".concat(dataId, "_search"),
+          i18nKeys: TextBoxIcon_i18n,
+          autoComplete: autoComplete,
+          customProps: {
+            TextBoxProps: DropdownSearchTextBoxProps
+          },
+          renderCustomClearComponent: renderCustomSearchClearComponent
+        }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
+          shrink: true,
+          customClass: "\n                              ".concat(!tabletMode && dropBoxSize ? _SelectModule["default"][dropBoxSize] : '', " ").concat(cardContentClass),
+          eleRef: _this7.suggestionContainerRef
+        }, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
+          key: searchStr.trim(),
+          activeId: selectedId,
+          isVirtualizerEnabled: isVirtualizerEnabled,
+          getVirtualizerPublicMethods: _this7.getVirtualizerPublicMethods,
+          setVirtualizerContainerRefFunction: _this7.setSuggestionsVirtualizerContainerRefFunction,
+          suggestions: suggestions,
+          getRef: _this7.suggestionItemRef,
+          hoverOption: hoverIndex,
+          onClick: _this7.handleChange,
+          onMouseEnter: _this7.handleMouseEnter,
+          dataId: "".concat(dataId, "_Options"),
+          needTick: needTick,
+          needBorder: needListBorder,
+          selectedOptions: [selectedId],
+          className: "".concat(tabletMode ? _SelectModule["default"].responsivelistItemContainer : _SelectModule["default"].listItemContainer),
+          listItemSize: listItemSize,
+          htmlId: setAriaId,
+          a11y: {
+            ariaParentRole: 'listbox',
+            role: 'option'
+          }
+        }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+          isLoading: isFetchingOptions,
+          options: options,
+          searchString: searchStr,
+          suggestions: suggestions,
+          dataId: dataId,
+          renderCustomEmptyState: renderCustomEmptyState,
+          getCustomEmptyState: getCustomEmptyState ? _this7.handleGetAddNewOptionText : null,
+          i18nKeys: i18nKeys,
+          htmlId: ariaErrorId
+        }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+          isCover: false,
+          align: "both"
+        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter()) : null)) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          flexible: true
+        }, getChildren())));
       }) : null);
     }
   }]);

package/lib/Select/Select.module.css

@@ -22,12 +22,12 @@
 
 .box_small .emptyState {
   padding-block: var(--zd_size12) ;
-  padding-inline: var(--zd_size6) ;
+  padding-inline:var(--zd_size6) ;
 }
 
 .box_medium .emptyState {
   padding-block: var(--zd_size12) ;
-  padding-inline: var(--zd_size15) ;
+  padding-inline:var(--zd_size15) ;
 }
 
 .hide {
@@ -37,7 +37,6 @@
 .container {
   position: relative;
 }
-
 /* css:lineheight-validation:ignore */
 .arrowIcon {
   height: var(--zd_size8) ;
@@ -46,12 +45,12 @@
 
 .small.search {
   padding-block: 0 ;
-  padding-inline: var(--zd_size5) ;
+  padding-inline:var(--zd_size5) ;
 }
 
 .medium.search {
   padding-block: var(--zd_size3) 0 ;
-  padding-inline: var(--zd_size20) ;
+  padding-inline:var(--zd_size20) ;
 }
 
 .title {
@@ -60,17 +59,17 @@
 
 .groupTitle {
   margin-block: var(--zd_size6) ;
-  margin-inline: 0 ;
+  margin-inline:0 ;
 }
 
 .listItemContainer {
   padding-block: var(--zd_size10) ;
-  padding-inline: 0 ;
+  padding-inline:0 ;
 }
 
 .responsivelistItemContainer {
   padding-block: var(--zd_size10) 0 ;
-  padding-inline: 0 ;
+  padding-inline:0 ;
 }
 
 .readonly {
@@ -112,19 +111,18 @@
 
 .dropBoxList {
   padding-block: var(--zd_size10) ;
-  padding-inline: 0 ;
+  padding-inline:0 ;
 }
 
 .responsivedropBoxList {
   padding-block: var(--zd_size10) 0 ;
-  padding-inline: 0 ;
+  padding-inline:0 ;
 }
 
 .rotate {
   transform: rotateX(180deg);
 }
-
-.rightPlaceholder {
+.rightPlaceholder{
   height: 100% ;
 }
 
@@ -143,29 +141,3 @@
 .loader {
   padding: var(--zd_size10) ;
 }
-
-.dropBoxWithSuggestedStatus {
-  border-radius: 7px;
-}
-
-.dropBoxListContainer {
-  width: 100% ;
-  border-radius: 7px;
-  padding: var(--zd_size10) ;
-  border: 1px solid var(--zdt_statusdropdown_wrapper_container_border);
-  background: var(--zdt_statusdropdown_wrapper_container_bg);
-  box-shadow: var(--zd_bs_statusdropdown_wrapper_container);
-}
-
-.dropdownOptions {
-  padding-inline: var(--zd_size1) ;
-  padding-block: var(--zd_size1) ;
-  background-color: var(--zdt_commentList_normal_bg);
-  border: 1px solid var(--zdt_statusdropdown_wrapper_container_border);
-  border-radius: 7px;
-}
-
-.suggestedStatusContainer {
-  margin-block-end: var(--zd_size6) ;
-  margin-inline: var(--zd_size1) ;
-}

package/lib/Select/props/defaultProps.js

@@ -50,8 +50,7 @@ var Select_defaultProps = {
   isAbsolutePositioningNeeded: true,
   allowValueFallback: true,
   inputFieldLineA11y: {},
-  customClass: {},
-  renderSuggestedStatus: null
+  customClass: {}
 };
 exports.Select_defaultProps = Select_defaultProps;
 var GroupSelect_defaultProps = {

package/lib/Select/props/propTypes.js

@@ -124,8 +124,7 @@ var Select_propTypes = {
   customClass: _propTypes["default"].shape({
     dropBox: _propTypes["default"].string,
     cardContent: _propTypes["default"].string
-  }),
-  renderSuggestedStatus: _propTypes["default"].node
+  })
 };
 exports.Select_propTypes = Select_propTypes;
 var GroupSelect_propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-252",
+  "version": "1.0.0-temp-253",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,