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

package/README.md

@@ -2,12 +2,6 @@
 
 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

@@ -6,6 +6,7 @@ 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 {
@@ -27,6 +28,7 @@ export default function DropBoxElement(props) {
     tabIndex,
     palette,
     subContainerRef,
+    getSubContainerRef,
     customStyle,
     animationStyle
   } = props;
@@ -54,6 +56,14 @@ export default function DropBoxElement(props) {
     }
   };
 
+  const setSubContainerRef = ele => {
+    if (subContainerRef) {
+      subContainerRef.current = ele;
+    }
+
+    getSubContainerRef && getSubContainerRef(ele);
+  };
+
   if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
     isAbsolute = true;
   }
@@ -94,14 +104,14 @@ export default function DropBoxElement(props) {
       isAbsolute
     }
   });
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Container, {
+    scroll: "none",
     className: boxClassName,
-    "data-id": `${dataId}`,
-    "data-test-id": `${dataId}`,
-    "data-selector-id": dataSelectorId,
-    ref: getRef,
+    dataId: `${dataId}`,
+    dataSelectorId: dataSelectorId,
+    eleRef: getRef,
     style: inlineStyle,
-    "data-tour": tourId,
+    tourId: tourId,
     "data-position": boxPosition,
     "data-box-direction": boxDirection,
     "data-arrow-position": arrowPosition,
@@ -113,14 +123,14 @@ export default function DropBoxElement(props) {
     onAnimationEnd: isAnimate && FireOnAnimationEnd,
     "data-a11y-focus-main-area": true,
     "dot-ui-element": "dropbox"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
     tabIndex: "-1",
     className: `${subContainerClass} ${style[`${palette}Palette`]}`,
     onClick: onClick,
-    "data-id": `${dataId}_subcontainer`,
-    "data-test-id": `${dataId}_subcontainer`,
-    "data-selector-id": `${dataSelectorId}_subcontainer`,
-    ref: subContainerRef
+    dataId: `${dataId}_subcontainer`,
+    dataSelectorId: `${dataSelectorId}_subcontainer`,
+    eleRef: 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,6 +13,8 @@
 
 .subContainer {
     position: relative;
+    display: flex;
+    flex-direction: column;
     border-radius: var(--dropbox_border_radius);
     padding: var(--dropbox_padding);
     box-shadow: var(--dropbox_box_shadow);
@@ -430,8 +432,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 +445,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

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

package/es/Select/Select.js

@@ -813,8 +813,7 @@ export class SelectComponent extends Component {
       renderCustomSearchClearComponent,
       renderCustomSelectedValue,
       inputFieldLineA11y,
-      customClass,
-      renderCustomDropBoxHeader
+      customClass
     } = this.props;
     let {
       TextBoxIcon_i18n,
@@ -845,8 +844,7 @@ export class SelectComponent extends Component {
     } = customProps;
     const {
       dropBox: dropBoxClass = '',
-      cardContent: cardContentClass = '',
-      customDropBoxHeader: customDropBoxHeaderClass = ''
+      cardContent: cardContentClass = ''
     } = customClass;
     const inputFieldLineA11yAttributes = this.getInputFieldLineA11y({
       setAriaId,
@@ -1023,92 +1021,81 @@ export class SelectComponent extends Component {
         isRestrictScroll: isRestrictScroll,
         portalId: dropBoxPortalId,
         customClass: {
-          customDropBox: `${dropBoxClass} ${renderCustomDropBoxHeader ? style.dropBoxWithCustomHeader : ''}`
+          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 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;
-      })());
+        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 {
@@ -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,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% ;
 }
 
@@ -142,29 +141,3 @@
 .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,8 +38,7 @@ export const Select_defaultProps = {
   isAbsolutePositioningNeeded: true,
   allowValueFallback: true,
   inputFieldLineA11y: {},
-  customClass: {},
-  renderCustomDropBoxHeader: null
+  customClass: {}
 };
 export const GroupSelect_defaultProps = {
   animationStyle: 'bounce',

package/es/Select/props/propTypes.js

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

package/lib/DropBox/DropBoxElement/DropBoxElement.js

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

@@ -81,8 +81,7 @@ 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,
-          alignBox = _this$props.alignBox;
+          isResponsivePadding = _this$props.isResponsivePadding;
       var _customClass$customDr = customClass.customDropBox,
           customDropBox = _customClass$customDr === void 0 ? '' : _customClass$customDr,
           _customClass$customMo = customClass.customMobileDropBox,
@@ -107,10 +106,10 @@ var ResponsiveDropBox = /*#__PURE__*/function (_Component) {
         responsiveId: "Helmet"
       }, function (_ref2) {
         var tabletMode = _ref2.tabletMode;
-        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)
+        return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          flexible: true,
+          shrink: true,
+          className: "".concat(tabletMode ? _ResponsiveDropBoxModule["default"].dropBoxContainer : '', " ").concat(tabletMode && isResponsivePadding ? _ResponsiveDropBoxModule["default"].boxPadding : '')
         }, 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,
-          renderCustomDropBoxHeader = _this$props11.renderCustomDropBoxHeader;
+          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$customDr = customClass.customDropBoxHeader,
-          customDropBoxHeaderClass = _customClass$customDr === void 0 ? '' : _customClass$customDr;
+          cardContentClass = _customClass$cardCont === void 0 ? '' : _customClass$cardCont;
       var inputFieldLineA11yAttributes = this.getInputFieldLineA11y({
         setAriaId: setAriaId,
         isReadOnly: isReadOnly,
@@ -1068,91 +1065,80 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           isRestrictScroll: isRestrictScroll,
           portalId: dropBoxPortalId,
           customClass: {
-            customDropBox: "".concat(dropBoxClass, " ").concat(renderCustomDropBoxHeader ? _SelectModule["default"].dropBoxWithCustomHeader : '')
+            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 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;
-        }());
+        }, 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 {
@@ -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,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% ;
 }
 
@@ -142,29 +141,3 @@
 .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,8 +50,7 @@ var Select_defaultProps = {
   isAbsolutePositioningNeeded: true,
   allowValueFallback: true,
   inputFieldLineA11y: {},
-  customClass: {},
-  renderCustomDropBoxHeader: null
+  customClass: {}
 };
 exports.Select_defaultProps = Select_defaultProps;
 var GroupSelect_defaultProps = {

package/lib/Select/props/propTypes.js

@@ -123,10 +123,8 @@ var Select_propTypes = {
   inputFieldLineA11y: _propTypes["default"].object,
   customClass: _propTypes["default"].shape({
     dropBox: _propTypes["default"].string,
-    cardContent: _propTypes["default"].string,
-    customDropBoxHeader: _propTypes["default"].string
-  }),
-  renderCustomDropBoxHeader: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node])
+    cardContent: _propTypes["default"].string
+  })
 };
 exports.Select_propTypes = Select_propTypes;
 var GroupSelect_propTypes = {

package/package.json

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