@zohodesk/components 1.0.0-temp-253.1 → 1.0.0-temp-252.2

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/assets/Appearance/dark/mode/Component_DarkMode.module.css

@@ -258,6 +258,9 @@
 	/* select */
 	--zdt_select_emptystate_text:hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_select_disable_text:var(--dot_inputDisable);
+	--zdt_select_wrapper_container_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.2 + var(--zdc_alpha_low)));
+	--zdt_select_wrapper_container_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%,  0.03);
+	--zdt_select_wrapper_dropdown_bg:hsla(217, calc(var(--zd-saturation, 1) * 23.08%), calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* multiselect */
 	--zdt_multiselect_default_border:var(--dot_inputLine);

package/assets/Appearance/light/mode/Component_LightMode.module.css

@@ -258,6 +258,9 @@
 	/* select */
 	--zdt_select_emptystate_text:hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_select_disable_text:var(--dot_inputDisable);
+	--zdt_select_wrapper_container_border:hsla(218, calc(var(--zd-saturation, 1) * 42.22%), calc(91.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_select_wrapper_container_bg:hsla(216, calc(var(--zd-saturation, 1) * 38.46%), 97.45%, 1);
+	--zdt_select_wrapper_dropdown_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* multiselect */
 	--zdt_multiselect_default_border:var(--dot_inputLine);

package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css

@@ -258,6 +258,9 @@
 	/* select */
 	--zdt_select_emptystate_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_select_disable_text:var(--dot_inputDisable);
+	--zdt_select_wrapper_container_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.2 + var(--zdc_alpha_low)));
+	--zdt_select_wrapper_container_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%,  0.03);
+	--zdt_select_wrapper_dropdown_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* multiselect */
 	--zdt_multiselect_default_border:var(--dot_inputLine);

package/es/DropBox/DropBoxElement/DropBoxElement.js

@@ -6,7 +6,6 @@ import { positionMapping } from '@zohodesk/dotkit/es/react/components/Popup/util
 import { DropBoxElementDefaultProps } from "./props/defaultProps";
 import { DropBoxElementPropTypes } from "./props/propTypes";
 import { mergeStyle } from '@zohodesk/utils';
-import { Container, Box } from "../../Layout";
 import style from "./css/DropBoxElement.module.css";
 export default function DropBoxElement(props) {
   let {
@@ -28,7 +27,6 @@ export default function DropBoxElement(props) {
     tabIndex,
     palette,
     subContainerRef,
-    getSubContainerRef,
     customStyle,
     animationStyle
   } = props;
@@ -56,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;
   }
@@ -104,14 +94,14 @@ export default function DropBoxElement(props) {
       isAbsolute
     }
   });
-  return /*#__PURE__*/React.createElement(Container, {
-    scroll: "none",
+  return /*#__PURE__*/React.createElement("div", {
     className: boxClassName,
-    dataId: `${dataId}`,
-    dataSelectorId: dataSelectorId,
-    eleRef: getRef,
+    "data-id": `${dataId}`,
+    "data-test-id": `${dataId}`,
+    "data-selector-id": dataSelectorId,
+    ref: getRef,
     style: inlineStyle,
-    tourId: tourId,
+    "data-tour": tourId,
     "data-position": boxPosition,
     "data-box-direction": boxDirection,
     "data-arrow-position": arrowPosition,
@@ -123,14 +113,14 @@ export default function DropBoxElement(props) {
     onAnimationEnd: isAnimate && FireOnAnimationEnd,
     "data-a11y-focus-main-area": true,
     "dot-ui-element": "dropbox"
-  }, /*#__PURE__*/React.createElement(Box, {
-    flexible: true,
+  }, /*#__PURE__*/React.createElement("div", {
     tabIndex: "-1",
     className: `${subContainerClass} ${style[`${palette}Palette`]}`,
     onClick: onClick,
-    dataId: `${dataId}_subcontainer`,
-    dataSelectorId: `${dataSelectorId}_subcontainer`,
-    eleRef: setSubContainerRef
+    "data-id": `${dataId}_subcontainer`,
+    "data-test-id": `${dataId}_subcontainer`,
+    "data-selector-id": `${dataSelectorId}_subcontainer`,
+    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,8 +13,6 @@
 
 .subContainer {
     position: relative;
-    display: flex;
-    flex-direction: column;
     border-radius: var(--dropbox_border_radius);
     padding: var(--dropbox_padding);
     box-shadow: var(--dropbox_box_shadow);
@@ -432,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;
@@ -445,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

@@ -4,7 +4,7 @@ import React, { Component } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import DropBox from "../DropBox/DropBox";
-import { Box } from "../Layout";
+import { Container } from "../Layout";
 import { ResponsiveReceiver } from "../Responsive/CustomResponsive";
 import style from "./ResponsiveDropBox.module.css";
 export default class ResponsiveDropBox extends Component {
@@ -28,7 +28,8 @@ export default class ResponsiveDropBox extends Component {
     const {
       children,
       customClass = {},
-      isResponsivePadding
+      isResponsivePadding,
+      alignBox
     } = this.props;
     const {
       customDropBox = '',
@@ -53,10 +54,10 @@ export default class ResponsiveDropBox extends Component {
       let {
         tabletMode
       } = _ref2;
-      return /*#__PURE__*/React.createElement(Box, {
-        flexible: true,
-        shrink: true,
-        className: `${tabletMode ? style.dropBoxContainer : ''} ${tabletMode && isResponsivePadding ? style.boxPadding : ''}`
+      return /*#__PURE__*/React.createElement(Container, {
+        alignBox: alignBox,
+        isCover: false,
+        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_select_wrapper_container_border);
+    background: var(--zdt_select_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_select_wrapper_dropdown_bg);
+    border: 1px solid var(--zdt_select_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

@@ -19,8 +19,6 @@ var _propTypes = require("./props/propTypes");
 
 var _utils = require("@zohodesk/utils");
 
-var _Layout = require("../../Layout");
-
 var _DropBoxElementModule = _interopRequireDefault(require("./css/DropBoxElement.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -45,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;
@@ -70,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;
   }
@@ -117,14 +106,14 @@ function DropBoxElement(props) {
       subContainerClass = _cssJSLogic.subContainerClass,
       inlineStyle = _cssJSLogic.inlineStyle;
 
-  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-    scroll: "none",
+  return /*#__PURE__*/_react["default"].createElement("div", {
     className: boxClassName,
-    dataId: "".concat(dataId),
-    dataSelectorId: dataSelectorId,
-    eleRef: getRef,
+    "data-id": "".concat(dataId),
+    "data-test-id": "".concat(dataId),
+    "data-selector-id": dataSelectorId,
+    ref: getRef,
     style: inlineStyle,
-    tourId: tourId,
+    "data-tour": tourId,
     "data-position": boxPosition,
     "data-box-direction": boxDirection,
     "data-arrow-position": arrowPosition,
@@ -136,14 +125,14 @@ function DropBoxElement(props) {
     onAnimationEnd: isAnimate && FireOnAnimationEnd,
     "data-a11y-focus-main-area": true,
     "dot-ui-element": "dropbox"
-  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-    flexible: true,
+  }, /*#__PURE__*/_react["default"].createElement("div", {
     tabIndex: "-1",
     className: "".concat(subContainerClass, " ").concat(_DropBoxElementModule["default"]["".concat(palette, "Palette")]),
     onClick: onClick,
-    dataId: "".concat(dataId, "_subcontainer"),
-    dataSelectorId: "".concat(dataSelectorId, "_subcontainer"),
-    eleRef: setSubContainerRef
+    "data-id": "".concat(dataId, "_subcontainer"),
+    "data-test-id": "".concat(dataId, "_subcontainer"),
+    "data-selector-id": "".concat(dataSelectorId, "_subcontainer"),
+    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,8 +13,6 @@
 
 .subContainer {
     position: relative;
-    display: flex;
-    flex-direction: column;
     border-radius: var(--dropbox_border_radius);
     padding: var(--dropbox_padding);
     box-shadow: var(--dropbox_box_shadow);
@@ -432,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;
@@ -445,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

@@ -81,7 +81,8 @@ var ResponsiveDropBox = /*#__PURE__*/function (_Component) {
           children = _this$props.children,
           _this$props$customCla = _this$props.customClass,
           customClass = _this$props$customCla === void 0 ? {} : _this$props$customCla,
-          isResponsivePadding = _this$props.isResponsivePadding;
+          isResponsivePadding = _this$props.isResponsivePadding,
+          alignBox = _this$props.alignBox;
       var _customClass$customDr = customClass.customDropBox,
           customDropBox = _customClass$customDr === void 0 ? '' : _customClass$customDr,
           _customClass$customMo = customClass.customMobileDropBox,
@@ -106,10 +107,10 @@ var ResponsiveDropBox = /*#__PURE__*/function (_Component) {
         responsiveId: "Helmet"
       }, function (_ref2) {
         var tabletMode = _ref2.tabletMode;
-        return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-          flexible: true,
-          shrink: true,
-          className: "".concat(tabletMode ? _ResponsiveDropBoxModule["default"].dropBoxContainer : '', " ").concat(tabletMode && isResponsivePadding ? _ResponsiveDropBoxModule["default"].boxPadding : '')
+        return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+          alignBox: alignBox,
+          isCover: false,
+          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_select_wrapper_container_border);
+    background: var(--zdt_select_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_select_wrapper_dropdown_bg);
+    border: 1px solid var(--zdt_select_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.1",
+  "version": "1.0.0-temp-252.2",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,