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

package/README.md

@@ -2,6 +2,12 @@
 
 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.13
+
+- **Select**
+  - Added `renderCustomDropBoxHeader` prop to render a custom node at the top of the dropdown, above the suggestions list.
+  - Added `customDropBoxHeader` key under the `customClass` prop to style the custom header wrapper.
+
 # 1.6.12
 
 - v1/Button/_shared/SuccessTick/SuccessTick.module.css file renamed to SuccessTick_v1.module.css 

package/es/DropBox/DropBoxElement/DropBoxElement.js

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

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

@@ -13,13 +13,9 @@
 
 .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,
@@ -434,8 +430,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;
@@ -447,4 +443,4 @@
 
 .darkPalette {
     --dropbox_bg_color: var(--zdt_dropbox_dark_bg);
-}
+}

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

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

package/es/ResponsiveDropBox/ResponsiveDropBox.js

@@ -57,7 +57,6 @@ 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,7 +813,8 @@ export class SelectComponent extends Component {
       renderCustomSearchClearComponent,
       renderCustomSelectedValue,
       inputFieldLineA11y,
-      customClass
+      customClass,
+      renderCustomDropBoxHeader
     } = this.props;
     let {
       TextBoxIcon_i18n,
@@ -844,7 +845,8 @@ export class SelectComponent extends Component {
     } = customProps;
     const {
       dropBox: dropBoxClass = '',
-      cardContent: cardContentClass = ''
+      cardContent: cardContentClass = '',
+      customDropBoxHeader: customDropBoxHeaderClass = ''
     } = customClass;
     const inputFieldLineA11yAttributes = this.getInputFieldLineA11y({
       setAriaId,
@@ -1021,81 +1023,92 @@ export class SelectComponent extends Component {
         isRestrictScroll: isRestrictScroll,
         portalId: dropBoxPortalId,
         customClass: {
-          customDropBox: dropBoxClass
+          customDropBox: `${dropBoxClass} ${renderCustomDropBoxHeader ? style.dropBoxWithCustomHeader : ''}`
         }
-      }, 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: `
+      }, (() => {
+        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: `
                               ${!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())));
+          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 renderCustomDropBoxHeader ? /*#__PURE__*/React.createElement("div", {
+          className: style.dropBoxListContainer
+        }, /*#__PURE__*/React.createElement("div", {
+          className: `${customDropBoxHeaderClass} ${style.customDropBoxHeaderContainer}`
+        }, renderNode(renderCustomDropBoxHeader, {
+          closePopup: this.handlePopupClose
+        })), /*#__PURE__*/React.createElement("div", {
+          className: style.dropdownOptions
+        }, dropdownContent)) : dropdownContent;
+      })());
     }) : 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 {
@@ -45,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 {
@@ -59,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 {
@@ -111,18 +111,19 @@
 
 .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% ;
 }
 
@@ -141,3 +142,29 @@
 .loader {
   padding: var(--zd_size10) ;
 }
+
+.dropBoxWithCustomHeader {
+  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_statusdropdown_wrapper_dropdown_bg);
+  border: 1px solid var(--zdt_statusdropdown_wrapper_container_border);
+  border-radius: 7px;
+}
+
+.customDropBoxHeaderContainer {
+  margin-block-end: var(--zd_size6) ;
+  margin-inline: var(--zd_size1) ;
+}

package/es/Select/props/defaultProps.js

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

package/es/Select/props/propTypes.js

@@ -107,8 +107,10 @@ export const Select_propTypes = {
   inputFieldLineA11y: PropTypes.object,
   customClass: PropTypes.shape({
     dropBox: PropTypes.string,
-    cardContent: PropTypes.string
-  })
+    cardContent: PropTypes.string,
+    customDropBoxHeader: PropTypes.string
+  }),
+  renderCustomDropBoxHeader: PropTypes.oneOfType([PropTypes.func, PropTypes.node])
 };
 export const GroupSelect_propTypes = {
   groupedOptions: PropTypes.arrayOf(PropTypes.shape({

package/lib/DropBox/DropBoxElement/DropBoxElement.js

@@ -43,7 +43,6 @@ function DropBoxElement(props) {
       tabIndex = props.tabIndex,
       palette = props.palette,
       subContainerRef = props.subContainerRef,
-      getSubContainerRef = props.getSubContainerRef,
       customStyle = props.customStyle,
       animationStyle = props.animationStyle;
   var isAbsolute = isAbsolutePositioningNeeded;
@@ -68,14 +67,6 @@ function DropBoxElement(props) {
     }
   };
 
-  var setSubContainerRef = function setSubContainerRef(ele) {
-    if (subContainerRef) {
-      subContainerRef.current = ele;
-    }
-
-    getSubContainerRef && getSubContainerRef(ele);
-  };
-
   if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
     isAbsolute = true;
   }
@@ -141,7 +132,7 @@ function DropBoxElement(props) {
     "data-id": "".concat(dataId, "_subcontainer"),
     "data-test-id": "".concat(dataId, "_subcontainer"),
     "data-selector-id": "".concat(dataSelectorId, "_subcontainer"),
-    ref: setSubContainerRef
+    ref: subContainerRef
   }, 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,13 +13,9 @@
 
 .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,
@@ -434,8 +430,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;
@@ -447,4 +443,4 @@
 
 .darkPalette {
     --dropbox_bg_color: var(--zdt_dropbox_dark_bg);
-}
+}

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

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

package/lib/ResponsiveDropBox/ResponsiveDropBox.js

@@ -110,7 +110,6 @@ 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,7 +860,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           renderCustomSearchClearComponent = _this$props11.renderCustomSearchClearComponent,
           renderCustomSelectedValue = _this$props11.renderCustomSelectedValue,
           inputFieldLineA11y = _this$props11.inputFieldLineA11y,
-          customClass = _this$props11.customClass;
+          customClass = _this$props11.customClass,
+          renderCustomDropBoxHeader = _this$props11.renderCustomDropBoxHeader;
       var _i18nKeys = i18nKeys,
           TextBoxIcon_i18n = _i18nKeys.TextBoxIcon_i18n,
           _i18nKeys$TextBox_all = _i18nKeys.TextBox_ally_label,
@@ -893,7 +894,9 @@ 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;
+          cardContentClass = _customClass$cardCont === void 0 ? '' : _customClass$cardCont,
+          _customClass$customDr = customClass.customDropBoxHeader,
+          customDropBoxHeaderClass = _customClass$customDr === void 0 ? '' : _customClass$customDr;
       var inputFieldLineA11yAttributes = this.getInputFieldLineA11y({
         setAriaId: setAriaId,
         isReadOnly: isReadOnly,
@@ -1065,80 +1068,91 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           isRestrictScroll: isRestrictScroll,
           portalId: dropBoxPortalId,
           customClass: {
-            customDropBox: dropBoxClass
+            customDropBox: "".concat(dropBoxClass, " ").concat(renderCustomDropBoxHeader ? _SelectModule["default"].dropBoxWithCustomHeader : '')
           }
-        }, 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())));
+        }, 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 renderCustomDropBoxHeader ? /*#__PURE__*/_react["default"].createElement("div", {
+            className: _SelectModule["default"].dropBoxListContainer
+          }, /*#__PURE__*/_react["default"].createElement("div", {
+            className: "".concat(customDropBoxHeaderClass, " ").concat(_SelectModule["default"].customDropBoxHeaderContainer)
+          }, (0, _utils.renderNode)(renderCustomDropBoxHeader, {
+            closePopup: _this7.handlePopupClose
+          })), /*#__PURE__*/_react["default"].createElement("div", {
+            className: _SelectModule["default"].dropdownOptions
+          }, dropdownContent)) : dropdownContent;
+        }());
       }) : 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 {
@@ -45,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 {
@@ -59,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 {
@@ -111,18 +111,19 @@
 
 .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% ;
 }
 
@@ -141,3 +142,29 @@
 .loader {
   padding: var(--zd_size10) ;
 }
+
+.dropBoxWithCustomHeader {
+  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_statusdropdown_wrapper_dropdown_bg);
+  border: 1px solid var(--zdt_statusdropdown_wrapper_container_border);
+  border-radius: 7px;
+}
+
+.customDropBoxHeaderContainer {
+  margin-block-end: var(--zd_size6) ;
+  margin-inline: var(--zd_size1) ;
+}

package/lib/Select/props/defaultProps.js

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

package/lib/Select/props/propTypes.js

@@ -123,8 +123,10 @@ var Select_propTypes = {
   inputFieldLineA11y: _propTypes["default"].object,
   customClass: _propTypes["default"].shape({
     dropBox: _propTypes["default"].string,
-    cardContent: _propTypes["default"].string
-  })
+    cardContent: _propTypes["default"].string,
+    customDropBoxHeader: _propTypes["default"].string
+  }),
+  renderCustomDropBoxHeader: _propTypes["default"].oneOfType([_propTypes["default"].func, _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-253",
+  "version": "1.0.0-temp-252.1",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -22,7 +22,7 @@
     "lintAllFix": "npm run lintAll --eslint:fix=true",
     "lint": "npx eslint ./src",
     "clean": "react-cli clean build unittest coverage es lib assets && mkdir assets",
-    "dubCheck": "node ./node_modules/@zohodesk-private/node-plugins/es/dublication_css_file_finder  node_modules/@zohodesk/icons/es node_modules/@zohodesk/variables/es ../dot/src ../internal/desk-components/src",
+    "dubCheck": "npx z-node-plugins dub:check node_modules/@zohodesk/icons/es node_modules/@zohodesk/variables/es ../dot/src ../internal/desk-components/src",
     "init": "npm run clean && cd ../assets && npm run componentsassets && cd ../components",
     "common_package_build": "cd ../common && npm run build && cd ../components",
     "build:lib": "cbt build:lib src,assets lib,assets",
@@ -33,7 +33,7 @@
     "build:watch": "npm run build:es:watch --module:mode=dev -- -w",
     "coverage": "react-cli coverage",
     "prepare": "npm run init &&  npm run css:build ",
-    "prepublishOnly": "node ../prePublish.js && npm run css:review && npm run review:props ",
+    "prepublishOnly": "node ../prePublish.js && npm run css:review",
     "postpublish": "node ../postPublish.js",
     "report": "react-cli publish:report",
     "test": "react-cli test",
@@ -45,22 +45,22 @@
     "download": "npm run download_only && cd ../ && npm run download",
     "download_only": "react-cli clean ./node_modules ./package-lock.json && npm install  --legacy-peer-deps",
     "expublish": "node ../publish.js -- exp",
-    "css:lineheight:validate": "node ./node_modules/@zohodesk-private/node-plugins/es/lineheight_automation/lineHeightErrorCheck.js ./src/",
+    "css:lineheight:validate": "npx z-node-plugins lineheight:errorcheck ./src/",
     "variable:addignore": "node ./node_modules/@zohodesk-private/css-variable-migrator/es/variableIgnore.js ./src",
     "variable:convert": "node ./node_modules/@zohodesk-private/css-variable-migrator/es/pxParserPostcss.js ./src",
     "variable:check": "node  ./node_modules/@zohodesk-private/css-variable-migrator/es/variableErrorCheck.js ./src ./node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json",
     "css:review": " npm run dubCheck && npm run css:lineheight:validate && npm run theme:validate ",
-    "theme:validate": "node ./node_modules/@zohodesk-private/node-plugins/es/appearance_theme_validation validate ./src ./.cli ./.cli/themeValidate/stringContains.js",
-    "theme:addignore": "node ./node_modules/@zohodesk-private/node-plugins/es/appearance_theme_validation addignore ./src ./.cli ./.cli/themeValidate/stringContains.js",
-    "theme:removeignore": "node ./node_modules/@zohodesk-private/node-plugins/es/appearance_theme_validation removeignore ./src ./.cli",
+    "theme:validate": "npx z-node-plugins theme:validate ./src ./.cli ./.cli/themeValidate/stringContains.js",
+    "theme:addignore": "npx z-node-plugins theme:addignore ./src ./.cli ./.cli/themeValidate/stringContains.js",
+    "theme:removeignore": "npx z-node-plugins theme:removeignore ./src ./.cli",
     "review:props": "node ./node_modules/@zohodesk-private/react-prop-validator/es/propValidation.js propValidationArg.json ",
-    "css:layer_config_generate": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/scan_css_generate_json.js ./src ./assets css_layer_config.json",
-    "css:layer_wrap_es": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/write_layer_in_css.js ./es ./assets css_layer_config.json --rewrite=src=es --rewrite=assets=assets --skip-existing-layer",
-    "css:layer_wrap_lib": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/write_layer_in_css.js ./lib ./assets css_layer_config.json --rewrite=src=lib  --rewrite=assets=assets --skip-existing-layer",
-    "css:layer_generate_order": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/generate_layer_order.js  css_layer_config.json ./src/components_layer.module.css",
-    "css:layer_config_validate": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/validate.js  css_layer_config.json ./src/ ./assets",
+    "css:layer_config_generate": "npx z-node-plugins css:scan ./src ./assets css_layer_config.json",
+    "css:layer_wrap_es": "npx z-node-plugins css:layer_wrap ./es ./assets css_layer_config.json --rewrite=src=es --rewrite=assets=assets --skip-existing-layer",
+    "css:layer_wrap_lib": "npx z-node-plugins css:layer_wrap ./lib ./assets css_layer_config.json --rewrite=src=lib --rewrite=assets=assets --skip-existing-layer",
+    "css:layer_generate_order": "npx z-node-plugins css:layer_order css_layer_config.json ./src/components_layer.module.css",
+    "css:layer_config_validate": "npx z-node-plugins css:layer_validate css_layer_config.json ./src/ ./assets",
     "css:build": "npm run css:layer_config_validate && npm run css:layer_generate_order && npm run build",
-    "css:layer_remove": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/remove_layer.js ./es ./assets css_layer_config.json --rewrite=src=es  --rewrite=assets=assets",
+    "css:layer_remove": "npx z-node-plugins css:layer_remove ./es ./assets css_layer_config.json --rewrite=src=es --rewrite=assets=assets",
     "css:audit": "npx css-audit  --common-css=common/common.module.css --dir src  --port 8085  --report ",
     "cssVariableConvert": "react-cli variableConverter ./lib ./lib && react-cli variableConverter ./es ./es",
     "publish": "node ../publish.js",
@@ -75,13 +75,13 @@
     "@zohodesk-private/css-audit-tool": "0.0.2",
     "@zohodesk-private/color-variable-preprocessor": "1.3.1",
     "@zohodesk-private/css-variable-migrator": "1.0.9",
-    "@zohodesk-private/node-plugins": "1.1.13",
+    "@zohodesk-private/node-plugins": "1.1.14",
     "@zohodesk-private/react-prop-validator": "1.2.3",
     "@zohodesk/a11y": "2.3.9",
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/dotkit": "1.0.9",
     "@zohodesk/hooks": "2.0.8",
-    "@zohodesk/icons": "1.2.8",
+    "@zohodesk/icons": "1.3.1",
     "@zohodesk/layout": "3.1.0",
     "@zohodesk/svg": "1.3.5",
     "@zohodesk/utils": "1.3.16",
@@ -91,7 +91,8 @@
     "velocity-react": "1.4.3",
     "@zohodesk/react-cli": "1.1.27",
     "@zohodesk/client_build_tool": "0.0.20",
-    "color": "4.2.3"
+    "color": "4.2.3",
+    "@dot-system/css-utility": "0.1.1"
   },
   "dependencies": {
     "hoist-non-react-statics": "3.0.1",
@@ -100,7 +101,7 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.2.8",
+    "@zohodesk/icons": "1.3.1",
     "@zohodesk/variables": "1.3.1",
     "@zohodesk/svg": "1.3.5",
     "@zohodesk/virtualizer": "1.0.13",
@@ -111,6 +112,7 @@
     "@zohodesk/a11y": "2.3.9",
     "@zohodesk/layout": "3.1.0",
     "@zohodesk/dotkit": "1.0.9",
-    "color": "4.2.3"
+    "color": "4.2.3",
+    "@dot-system/css-utility": "0.1.1"
   }
 }