@zohodesk/components 1.6.3 → 1.6.5

package/README.md

@@ -2,6 +2,23 @@
 
 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.5
+
+-  Added cardContent support in **SelectWithIcon**.
+-  Added dropBoxClass replaced to dropBox support in **SelectWithIcon**. <span style="color:red">Impacted</span>
+-  Added dropBox,cardContent support in **Select**.
+-  Added dropBox,cardContent support in **GroupSelect**.
+-  Added dropBox,cardContent support in **SelectWithAvatar**.
+
+# 1.6.4
+
+  - **Popup**
+    - Fixed an issue where the popup did not reposition correctly when the `mobileWidth` configuration was updated dynamically.
+
+    ### 🔒 Compatibility
+    - Requires `@zohodesk/dotkit` version `1.0.8` or above.
+
+
 # 1.6.3
 
 - Added customProps support to **AdvancedMultiSelect**.
@@ -15,6 +32,8 @@ Dot UI is a customizable React component library built to deliver a clean, acces
 
 - **Select, SelectWithIcon, SelectWithAvatar, GroupSelect, MultiSelect, MultiSelectWithAvatar, AdvancedMultiSelect, AdvancedGroupMultiSelect**
   - `renderCustomEmptyState` prop supported
+- **v1** code removed
+- **CBT** cli migrated for build  
 
 # 1.6.1
 

package/es/Popup/Popup.js

@@ -17,8 +17,15 @@ const Popup = function (Component) {
     closeOnScroll = false,
     isOutsideScrollBlocked = false
   } = options;
-  const getRootElement = getLibraryConfig('getRootElement');
-  const mobileWidth = getLibraryConfig('mobileWidth');
+
+  const getRootElement = () => {
+    return getLibraryConfig('getRootElement');
+  };
+
+  const getMobileWidth = () => {
+    return getLibraryConfig('mobileWidth');
+  };
+
   const middleware = {
     useAbsolutePositioning: isAbsolutePositioningNeeded,
     positionOrder: customOrder,
@@ -30,8 +37,8 @@ const Popup = function (Component) {
   };
   const popupConfig = {
     group,
-    mobileWidth,
-    rootElementCallback: getRootElement,
+    getMobileWidth,
+    getRootElement,
     middleware
   };
   return DotkitPopup(Component, popupConfig);

package/es/Select/GroupSelect.js

@@ -594,7 +594,8 @@ export class GroupSelectComponent extends PureComponent {
       iconOnHover,
       isLoading,
       dataSelectorId,
-      customProps
+      customProps,
+      customClass
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -628,6 +629,10 @@ export class GroupSelectComponent extends PureComponent {
       TextBoxProps = {},
       SuggestionsProps = {}
     } = customProps;
+    const {
+      dropBox: dropBoxClass = '',
+      cardContent: cardContentClass = ''
+    } = customClass;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
       "data-id": dataIdSlctComp,
@@ -731,7 +736,10 @@ export class GroupSelectComponent extends PureComponent {
         isRestrictScroll: isRestrictScroll,
         isResponsivePadding: getFooter ? false : true,
         alignBox: "row",
-        dataId: `${dataId}_suggestionBox`
+        dataId: `${dataId}_suggestionBox`,
+        customClass: {
+          customDropBox: dropBoxClass
+        }
       }, isLoading ? /*#__PURE__*/React.createElement(Container, {
         align: "both",
         className: style.loader
@@ -760,7 +768,7 @@ export class GroupSelectComponent extends PureComponent {
         dataId: `${dataId}_search`
       }))) : null, /*#__PURE__*/React.createElement(CardContent, {
         shrink: true,
-        customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
+        customClass: `${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''} ${cardContentClass}`,
         eleRef: this.suggestionContainerRef
       }, suggestionGroups.length ? suggestionGroups.map(group => {
         let {

package/es/Select/Select.js

@@ -812,7 +812,8 @@ export class SelectComponent extends Component {
       renderCustomToggleIndicator,
       renderCustomSearchClearComponent,
       renderCustomSelectedValue,
-      inputFieldLineA11y
+      inputFieldLineA11y,
+      customClass
     } = this.props;
     let {
       TextBoxIcon_i18n,
@@ -841,6 +842,10 @@ export class SelectComponent extends Component {
       TextBoxIconProps = {},
       InputFieldLineProps = {}
     } = customProps;
+    const {
+      dropBox: dropBoxClass = '',
+      cardContent: cardContentClass = ''
+    } = customClass;
     const inputFieldLineA11yAttributes = this.getInputFieldLineA11y({
       setAriaId,
       isReadOnly,
@@ -1014,7 +1019,10 @@ export class SelectComponent extends Component {
         positionsOffset: positionsOffset,
         targetOffset: targetOffset,
         isRestrictScroll: isRestrictScroll,
-        portalId: dropBoxPortalId
+        portalId: dropBoxPortalId,
+        customClass: {
+          customDropBox: dropBoxClass
+        }
       }, isLoading ? /*#__PURE__*/React.createElement(Container, {
         align: "both",
         className: style.loader
@@ -1047,7 +1055,8 @@ export class SelectComponent extends Component {
         renderCustomClearComponent: renderCustomSearchClearComponent
       }))) : null, /*#__PURE__*/React.createElement(CardContent, {
         shrink: true,
-        customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
+        customClass: `
+                              ${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''} ${cardContentClass}`,
         eleRef: this.suggestionContainerRef
       }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
         key: searchStr.trim(),

package/es/Select/SelectWithAvatar.js

@@ -173,7 +173,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       isLoading,
       dataSelectorId,
       getTargetRef,
-      customProps
+      customProps,
+      customClass
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -200,6 +201,10 @@ class SelectWithAvatarComponent extends SelectComponent {
       DropdownSearchTextBoxProps,
       SuggestionsProps = {}
     } = customProps;
+    const {
+      dropBox: dropBoxClass = '',
+      cardContent: cardContentClass = ''
+    } = customClass;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${className ? className : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
@@ -283,7 +288,10 @@ class SelectWithAvatarComponent extends SelectComponent {
         isPadding: false,
         isResponsivePadding: true,
         alignBox: "row",
-        dataId: `${dataId}_dropbox`
+        dataId: `${dataId}_dropbox`,
+        customClass: {
+          customDropBox: dropBoxClass
+        }
       }, isLoading ? /*#__PURE__*/React.createElement(Container, {
         align: "both",
         className: style.loader
@@ -311,7 +319,7 @@ class SelectWithAvatarComponent extends SelectComponent {
         autoComplete: false
       }, DropdownSearchTextBoxProps)))) : null, /*#__PURE__*/React.createElement(CardContent, {
         shrink: true,
-        customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
+        customClass: `${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''} ${cardContentClass}`,
         eleRef: this.suggestionContainerRef
       }, groupName ? /*#__PURE__*/React.createElement("div", {
         className: style.title

package/es/Select/SelectWithIcon.js

@@ -382,7 +382,8 @@ class SelectWithIcon extends Component {
       ListItemProps = {}
     } = customProps;
     const {
-      dropBoxClass = ''
+      dropBox: dropBoxClass = '',
+      cardContent: cardContentClass = ''
     } = customClass;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
@@ -514,7 +515,7 @@ class SelectWithIcon extends Component {
           TextBoxProps: DropdownSearchTextBoxProps
         }
       }))) : null, /*#__PURE__*/React.createElement(CardContent, {
-        customClass: `${tabletMode ? style.responsivedropBoxList : style.dropBoxList} ${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''}`,
+        customClass: `${tabletMode ? style.responsivedropBoxList : style.dropBoxList} ${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''} ${cardContentClass}`,
         shrink: true,
         eleRef: this.scrollContentRef,
         dataId: `${dataId}_Options`

package/es/Select/__tests__/__snapshots__/Select.spec.js.snap

@@ -219,7 +219,7 @@ exports[`Select - Should highlight the next list-items, when arrow keys pressed
               data-test-id="containerComponent"
             >
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -692,7 +692,7 @@ exports[`Select - Should open the dropdown, when click on the input 1`] = `
               data-test-id="containerComponent"
             >
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -890,7 +890,7 @@ exports[`Select - Should render all the options when search value is cleared 1`]
                 </div>
               </div>
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -1177,7 +1177,7 @@ exports[`Select - Should render given the options 1`] = `
               data-test-id="containerComponent"
             >
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -1790,7 +1790,7 @@ exports[`Select - Should render the only options matching search value 1`] = `
                 </div>
               </div>
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -2060,7 +2060,7 @@ exports[`Select - Should render the only options matching search value even with
                 </div>
               </div>
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -2398,7 +2398,7 @@ exports[`Select - Should show the custom empty state using getCustomEmptyState p
                 </div>
               </div>
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -2541,7 +2541,7 @@ exports[`Select - Should show the empty message when open the dropdown with no o
               data-test-id="containerComponent"
             >
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -2691,7 +2691,7 @@ exports[`Select - Should trigger getNextOptions, when scroll to the end of the d
               data-test-id="containerComponent"
             >
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -3335,7 +3335,7 @@ exports[`Select - Should trigger getNextOptions, when search with needLocalSearc
                 </div>
               </div>
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -3720,7 +3720,7 @@ exports[`Select - Should trigger onAddNewOption, when click on the custom search
                 </div>
               </div>
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -3865,7 +3865,7 @@ exports[`Select - Should update the value when select the option 1`] = `
               data-test-id="containerComponent"
             >
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -5165,7 +5165,7 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with isPopupOpe
               data-test-id="containerComponent"
             >
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -5312,7 +5312,7 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with isPopupOpe
               data-test-id="containerComponent"
             >
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -7138,7 +7138,7 @@ exports[`Select dataId snapshot -  Should render with dataId prop - dropbox open
                 </div>
               </div>
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -7365,7 +7365,7 @@ exports[`Select dataId snapshot -  Should render with dataId prop - empty state
               data-test-id="containerComponent"
             >
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -7840,7 +7840,7 @@ exports[`Select snapshot -  Should render with children and dropdown open 1`] =
               data-test-id="containerComponent"
             >
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -8132,7 +8132,7 @@ exports[`Select snapshot -  Should render with customProps 1`] = `
                 </div>
               </div>
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -8561,7 +8561,7 @@ exports[`Select snapshot -  Should render with dropBoxSize as large 1`] = `
                 </div>
               </div>
               <div
-                class="large grow basis shrinkOn scrolly"
+                class="large  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -8758,7 +8758,7 @@ exports[`Select snapshot -  Should render with dropBoxSize as medium 1`] = `
                 </div>
               </div>
               <div
-                class="medium grow basis shrinkOn scrolly"
+                class="medium  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -8955,7 +8955,7 @@ exports[`Select snapshot -  Should render with dropBoxSize as small 1`] = `
                 </div>
               </div>
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -9231,7 +9231,7 @@ exports[`Select snapshot -  Should render with getFooter 1`] = `
               data-test-id="containerComponent"
             >
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"

package/es/Select/props/defaultProps.js

@@ -37,7 +37,8 @@ export const Select_defaultProps = {
   isLoading: false,
   isAbsolutePositioningNeeded: true,
   allowValueFallback: true,
-  inputFieldLineA11y: {}
+  inputFieldLineA11y: {},
+  customClass: {}
 };
 export const GroupSelect_defaultProps = {
   animationStyle: 'bounce',
@@ -75,7 +76,8 @@ export const GroupSelect_defaultProps = {
   iconOnHover: false,
   isLoading: false,
   customProps: {},
-  allowValueFallback: true
+  allowValueFallback: true,
+  customClass: {}
 };
 export const SelectWithAvatar_defaultProps = {
   animationStyle: 'bounce',
@@ -103,7 +105,8 @@ export const SelectWithAvatar_defaultProps = {
   customProps: {},
   needEffect: true,
   isLoading: false,
-  customProps: {}
+  customProps: {},
+  customClass: {}
 };
 export const SelectWithIcon_defaultProps = {
   isReadOnly: false,

package/es/Select/props/propTypes.js

@@ -104,7 +104,11 @@ export const Select_propTypes = {
   renderCustomToggleIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   renderCustomSearchClearComponent: PropTypes.func,
   renderCustomSelectedValue: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-  inputFieldLineA11y: PropTypes.object
+  inputFieldLineA11y: PropTypes.object,
+  customClass: PropTypes.shape({
+    dropBox: PropTypes.string,
+    cardContent: PropTypes.string
+  })
 };
 export const GroupSelect_propTypes = {
   groupedOptions: PropTypes.arrayOf(PropTypes.shape({
@@ -192,7 +196,11 @@ export const GroupSelect_propTypes = {
     TextBoxIconProps: PropTypes.object,
     SuggestionsProps: PropTypes.object
   }),
-  allowValueFallback: PropTypes.bool
+  allowValueFallback: PropTypes.bool,
+  customClass: PropTypes.shape({
+    dropBox: PropTypes.string,
+    cardContent: PropTypes.string
+  })
 };
 export const SelectWithAvatar_propTypes = { ...Select_propTypes,
   textBoxClass: PropTypes.string,
@@ -256,6 +264,10 @@ export const SelectWithAvatar_propTypes = { ...Select_propTypes,
   dataSelectorId: PropTypes.string,
   customProps: PropTypes.shape({
     SuggestionsProps: PropTypes.object
+  }),
+  customClass: PropTypes.shape({
+    dropBox: PropTypes.string,
+    cardContent: PropTypes.string
   })
 };
 export const SelectWithIcon_propTypes = {
@@ -326,6 +338,7 @@ export const SelectWithIcon_propTypes = {
     ListItemProps: PropTypes.object
   }),
   customClass: PropTypes.shape({
-    dropBoxClass: PropTypes.string
+    dropBox: PropTypes.string,
+    cardContent: PropTypes.string
   })
 };

package/lib/Popup/Popup.js

@@ -35,8 +35,15 @@ var Popup = function Popup(Component) {
       closeOnScroll = _options$closeOnScrol === void 0 ? false : _options$closeOnScrol,
       _options$isOutsideScr = options.isOutsideScrollBlocked,
       isOutsideScrollBlocked = _options$isOutsideScr === void 0 ? false : _options$isOutsideScr;
-  var getRootElement = (0, _Config.getLibraryConfig)('getRootElement');
-  var mobileWidth = (0, _Config.getLibraryConfig)('mobileWidth');
+
+  var getRootElement = function getRootElement() {
+    return (0, _Config.getLibraryConfig)('getRootElement');
+  };
+
+  var getMobileWidth = function getMobileWidth() {
+    return (0, _Config.getLibraryConfig)('mobileWidth');
+  };
+
   var middleware = {
     useAbsolutePositioning: isAbsolutePositioningNeeded,
     positionOrder: customOrder,
@@ -48,8 +55,8 @@ var Popup = function Popup(Component) {
   };
   var popupConfig = {
     group: group,
-    mobileWidth: mobileWidth,
-    rootElementCallback: getRootElement,
+    getMobileWidth: getMobileWidth,
+    getRootElement: getRootElement,
     middleware: middleware
   };
   return (0, _Popup["default"])(Component, popupConfig);

package/lib/Select/GroupSelect.js

@@ -670,7 +670,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           iconOnHover = _this$props9.iconOnHover,
           isLoading = _this$props9.isLoading,
           dataSelectorId = _this$props9.dataSelectorId,
-          customProps = _this$props9.customProps;
+          customProps = _this$props9.customProps,
+          customClass = _this$props9.customClass;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -703,6 +704,10 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           TextBoxProps = _customProps$TextBoxP === void 0 ? {} : _customProps$TextBoxP,
           _customProps$Suggesti = customProps.SuggestionsProps,
           SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
+      var _customClass$dropBox = customClass.dropBox,
+          dropBoxClass = _customClass$dropBox === void 0 ? '' : _customClass$dropBox,
+          _customClass$cardCont = customClass.cardContent,
+          cardContentClass = _customClass$cardCont === void 0 ? '' : _customClass$cardCont;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : '', " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverStyle : ''),
         "data-id": dataIdSlctComp,
@@ -804,7 +809,10 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           isRestrictScroll: isRestrictScroll,
           isResponsivePadding: getFooter ? false : true,
           alignBox: "row",
-          dataId: "".concat(dataId, "_suggestionBox")
+          dataId: "".concat(dataId, "_suggestionBox"),
+          customClass: {
+            customDropBox: dropBoxClass
+          }
         }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           align: "both",
           className: _SelectModule["default"].loader
@@ -833,7 +841,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           dataId: "".concat(dataId, "_search")
         }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
           shrink: true,
-          customClass: !tabletMode && dropBoxSize ? _SelectModule["default"][dropBoxSize] : '',
+          customClass: "".concat(!tabletMode && dropBoxSize ? _SelectModule["default"][dropBoxSize] : '', " ").concat(cardContentClass),
           eleRef: _this7.suggestionContainerRef
         }, suggestionGroups.length ? suggestionGroups.map(function (group) {
           var groupId = group.id,

package/lib/Select/Select.js

@@ -859,7 +859,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           renderCustomToggleIndicator = _this$props11.renderCustomToggleIndicator,
           renderCustomSearchClearComponent = _this$props11.renderCustomSearchClearComponent,
           renderCustomSelectedValue = _this$props11.renderCustomSelectedValue,
-          inputFieldLineA11y = _this$props11.inputFieldLineA11y;
+          inputFieldLineA11y = _this$props11.inputFieldLineA11y,
+          customClass = _this$props11.customClass;
       var _i18nKeys = i18nKeys,
           TextBoxIcon_i18n = _i18nKeys.TextBoxIcon_i18n,
           _i18nKeys$TextBox_all = _i18nKeys.TextBox_ally_label,
@@ -889,6 +890,10 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI,
           _customProps$InputFie = customProps.InputFieldLineProps,
           InputFieldLineProps = _customProps$InputFie === void 0 ? {} : _customProps$InputFie;
+      var _customClass$dropBox = customClass.dropBox,
+          dropBoxClass = _customClass$dropBox === void 0 ? '' : _customClass$dropBox,
+          _customClass$cardCont = customClass.cardContent,
+          cardContentClass = _customClass$cardCont === void 0 ? '' : _customClass$cardCont;
       var inputFieldLineA11yAttributes = this.getInputFieldLineA11y({
         setAriaId: setAriaId,
         isReadOnly: isReadOnly,
@@ -1058,7 +1063,10 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           positionsOffset: positionsOffset,
           targetOffset: targetOffset,
           isRestrictScroll: isRestrictScroll,
-          portalId: dropBoxPortalId
+          portalId: dropBoxPortalId,
+          customClass: {
+            customDropBox: dropBoxClass
+          }
         }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           align: "both",
           className: _SelectModule["default"].loader
@@ -1091,7 +1099,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           renderCustomClearComponent: renderCustomSearchClearComponent
         }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
           shrink: true,
-          customClass: !tabletMode && dropBoxSize ? _SelectModule["default"][dropBoxSize] : '',
+          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(),

package/lib/Select/SelectWithAvatar.js

@@ -223,7 +223,8 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           isLoading = _this$props.isLoading,
           dataSelectorId = _this$props.dataSelectorId,
           getTargetRef = _this$props.getTargetRef,
-          customProps = _this$props.customProps;
+          customProps = _this$props.customProps,
+          customClass = _this$props.customClass;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -248,6 +249,10 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           DropdownSearchTextBoxProps = customProps.DropdownSearchTextBoxProps,
           _customProps$Suggesti = customProps.SuggestionsProps,
           SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
+      var _customClass$dropBox = customClass.dropBox,
+          dropBoxClass = _customClass$dropBox === void 0 ? '' : _customClass$dropBox,
+          _customClass$cardCont = customClass.cardContent,
+          cardContentClass = _customClass$cardCont === void 0 ? '' : _customClass$cardCont;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_MultiSelectModule["default"].wrapper, "  ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '', " ").concat(className ? className : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
@@ -329,7 +334,10 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           isPadding: false,
           isResponsivePadding: true,
           alignBox: "row",
-          dataId: "".concat(dataId, "_dropbox")
+          dataId: "".concat(dataId, "_dropbox"),
+          customClass: {
+            customDropBox: dropBoxClass
+          }
         }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           align: "both",
           className: _MultiSelectModule["default"].loader
@@ -357,7 +365,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           autoComplete: false
         }, DropdownSearchTextBoxProps)))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
           shrink: true,
-          customClass: !tabletMode && dropBoxSize ? _MultiSelectModule["default"][dropBoxSize] : '',
+          customClass: "".concat(!tabletMode && dropBoxSize ? _MultiSelectModule["default"][dropBoxSize] : '', " ").concat(cardContentClass),
           eleRef: _this2.suggestionContainerRef
         }, groupName ? /*#__PURE__*/_react["default"].createElement("div", {
           className: _MultiSelectModule["default"].title

package/lib/Select/SelectWithIcon.js

@@ -453,8 +453,10 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI,
           _customProps$ListItem = customProps.ListItemProps,
           ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem;
-      var _customClass$dropBoxC = customClass.dropBoxClass,
-          dropBoxClass = _customClass$dropBoxC === void 0 ? '' : _customClass$dropBoxC;
+      var _customClass$dropBox = customClass.dropBox,
+          dropBoxClass = _customClass$dropBox === void 0 ? '' : _customClass$dropBox,
+          _customClass$cardCont = customClass.cardContent,
+          cardContentClass = _customClass$cardCont === void 0 ? '' : _customClass$cardCont;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : ''),
         "data-title": isDisabled ? title : null,
@@ -582,7 +584,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
             TextBoxProps: DropdownSearchTextBoxProps
           }
         }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
-          customClass: "".concat(tabletMode ? _SelectModule["default"].responsivedropBoxList : _SelectModule["default"].dropBoxList, " ").concat(!tabletMode && dropBoxSize ? _SelectModule["default"][dropBoxSize] : ''),
+          customClass: "".concat(tabletMode ? _SelectModule["default"].responsivedropBoxList : _SelectModule["default"].dropBoxList, " ").concat(!tabletMode && dropBoxSize ? _SelectModule["default"][dropBoxSize] : '', " ").concat(cardContentClass),
           shrink: true,
           eleRef: _this5.scrollContentRef,
           dataId: "".concat(dataId, "_Options")

package/lib/Select/__tests__/__snapshots__/Select.spec.js.snap

@@ -219,7 +219,7 @@ exports[`Select - Should highlight the next list-items, when arrow keys pressed
               data-test-id="containerComponent"
             >
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -692,7 +692,7 @@ exports[`Select - Should open the dropdown, when click on the input 1`] = `
               data-test-id="containerComponent"
             >
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -890,7 +890,7 @@ exports[`Select - Should render all the options when search value is cleared 1`]
                 </div>
               </div>
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -1177,7 +1177,7 @@ exports[`Select - Should render given the options 1`] = `
               data-test-id="containerComponent"
             >
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -1790,7 +1790,7 @@ exports[`Select - Should render the only options matching search value 1`] = `
                 </div>
               </div>
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -2060,7 +2060,7 @@ exports[`Select - Should render the only options matching search value even with
                 </div>
               </div>
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -2398,7 +2398,7 @@ exports[`Select - Should show the custom empty state using getCustomEmptyState p
                 </div>
               </div>
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -2541,7 +2541,7 @@ exports[`Select - Should show the empty message when open the dropdown with no o
               data-test-id="containerComponent"
             >
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -2691,7 +2691,7 @@ exports[`Select - Should trigger getNextOptions, when scroll to the end of the d
               data-test-id="containerComponent"
             >
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -3335,7 +3335,7 @@ exports[`Select - Should trigger getNextOptions, when search with needLocalSearc
                 </div>
               </div>
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -3720,7 +3720,7 @@ exports[`Select - Should trigger onAddNewOption, when click on the custom search
                 </div>
               </div>
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -3865,7 +3865,7 @@ exports[`Select - Should update the value when select the option 1`] = `
               data-test-id="containerComponent"
             >
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -5165,7 +5165,7 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with isPopupOpe
               data-test-id="containerComponent"
             >
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -5312,7 +5312,7 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with isPopupOpe
               data-test-id="containerComponent"
             >
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -7138,7 +7138,7 @@ exports[`Select dataId snapshot -  Should render with dataId prop - dropbox open
                 </div>
               </div>
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -7365,7 +7365,7 @@ exports[`Select dataId snapshot -  Should render with dataId prop - empty state
               data-test-id="containerComponent"
             >
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -7840,7 +7840,7 @@ exports[`Select snapshot -  Should render with children and dropdown open 1`] =
               data-test-id="containerComponent"
             >
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -8132,7 +8132,7 @@ exports[`Select snapshot -  Should render with customProps 1`] = `
                 </div>
               </div>
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -8561,7 +8561,7 @@ exports[`Select snapshot -  Should render with dropBoxSize as large 1`] = `
                 </div>
               </div>
               <div
-                class="large grow basis shrinkOn scrolly"
+                class="large  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -8758,7 +8758,7 @@ exports[`Select snapshot -  Should render with dropBoxSize as medium 1`] = `
                 </div>
               </div>
               <div
-                class="medium grow basis shrinkOn scrolly"
+                class="medium  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -8955,7 +8955,7 @@ exports[`Select snapshot -  Should render with dropBoxSize as small 1`] = `
                 </div>
               </div>
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
@@ -9231,7 +9231,7 @@ exports[`Select snapshot -  Should render with getFooter 1`] = `
               data-test-id="containerComponent"
             >
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="small  grow basis shrinkOn scrolly"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"

package/lib/Select/props/defaultProps.js

@@ -7,7 +7,7 @@ exports.Select_defaultProps = exports.SelectWithIcon_defaultProps = exports.Sele
 
 var _Config = require("../../Provider/Config");
 
-var _SelectWithIcon_defau;
+var _SelectWithAvatar_def, _SelectWithIcon_defau;
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -49,7 +49,8 @@ var Select_defaultProps = {
   isLoading: false,
   isAbsolutePositioningNeeded: true,
   allowValueFallback: true,
-  inputFieldLineA11y: {}
+  inputFieldLineA11y: {},
+  customClass: {}
 };
 exports.Select_defaultProps = Select_defaultProps;
 var GroupSelect_defaultProps = {
@@ -88,11 +89,11 @@ var GroupSelect_defaultProps = {
   iconOnHover: false,
   isLoading: false,
   customProps: {},
-  allowValueFallback: true
+  allowValueFallback: true,
+  customClass: {}
 };
 exports.GroupSelect_defaultProps = GroupSelect_defaultProps;
-
-var SelectWithAvatar_defaultProps = _defineProperty({
+var SelectWithAvatar_defaultProps = (_SelectWithAvatar_def = {
   animationStyle: 'bounce',
   defaultDropBoxPosition: 'bottom',
   dropBoxSize: 'small',
@@ -118,8 +119,7 @@ var SelectWithAvatar_defaultProps = _defineProperty({
   customProps: {},
   needEffect: true,
   isLoading: false
-}, "customProps", {});
-
+}, _defineProperty(_SelectWithAvatar_def, "customProps", {}), _defineProperty(_SelectWithAvatar_def, "customClass", {}), _SelectWithAvatar_def);
 exports.SelectWithAvatar_defaultProps = SelectWithAvatar_defaultProps;
 var SelectWithIcon_defaultProps = (_SelectWithIcon_defau = {
   isReadOnly: false,

package/lib/Select/props/propTypes.js

@@ -120,7 +120,11 @@ var Select_propTypes = {
   renderCustomToggleIndicator: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
   renderCustomSearchClearComponent: _propTypes["default"].func,
   renderCustomSelectedValue: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
-  inputFieldLineA11y: _propTypes["default"].object
+  inputFieldLineA11y: _propTypes["default"].object,
+  customClass: _propTypes["default"].shape({
+    dropBox: _propTypes["default"].string,
+    cardContent: _propTypes["default"].string
+  })
 };
 exports.Select_propTypes = Select_propTypes;
 var GroupSelect_propTypes = {
@@ -209,7 +213,11 @@ var GroupSelect_propTypes = {
     TextBoxIconProps: _propTypes["default"].object,
     SuggestionsProps: _propTypes["default"].object
   }),
-  allowValueFallback: _propTypes["default"].bool
+  allowValueFallback: _propTypes["default"].bool,
+  customClass: _propTypes["default"].shape({
+    dropBox: _propTypes["default"].string,
+    cardContent: _propTypes["default"].string
+  })
 };
 exports.GroupSelect_propTypes = GroupSelect_propTypes;
 
@@ -275,6 +283,10 @@ var SelectWithAvatar_propTypes = _objectSpread(_objectSpread({}, Select_propType
   dataSelectorId: _propTypes["default"].string,
   customProps: _propTypes["default"].shape({
     SuggestionsProps: _propTypes["default"].object
+  }),
+  customClass: _propTypes["default"].shape({
+    dropBox: _propTypes["default"].string,
+    cardContent: _propTypes["default"].string
   })
 });
 
@@ -347,7 +359,8 @@ var SelectWithIcon_propTypes = {
     ListItemProps: _propTypes["default"].object
   }),
   customClass: _propTypes["default"].shape({
-    dropBoxClass: _propTypes["default"].string
+    dropBox: _propTypes["default"].string,
+    cardContent: _propTypes["default"].string
   })
 };
 exports.SelectWithIcon_propTypes = SelectWithIcon_propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.6.3",
+  "version": "1.6.5",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -76,11 +76,11 @@
     "@zohodesk-private/react-prop-validator": "1.2.3",
     "@zohodesk/a11y": "2.3.8",
     "@zohodesk/docstool": "1.0.0-alpha-2",
-    "@zohodesk/dotkit": "1.0.7",
-    "@zohodesk/hooks": "2.0.6",
-    "@zohodesk/icons": "1.2.3",
+    "@zohodesk/dotkit": "1.0.9",
+    "@zohodesk/hooks": "2.0.8",
+    "@zohodesk/icons": "1.2.7",
     "@zohodesk/layout": "3.1.0",
-    "@zohodesk/svg": "1.3.2",
+    "@zohodesk/svg": "1.3.3",
     "@zohodesk/utils": "1.3.16",
     "@zohodesk/variables": "1.2.0",
     "@zohodesk/virtualizer": "1.0.13",
@@ -97,17 +97,17 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.2.3",
+    "@zohodesk/icons": "1.2.7",
     "@zohodesk/variables": "1.2.0",
-    "@zohodesk/svg": "1.3.2",
+    "@zohodesk/svg": "1.3.3",
     "@zohodesk/virtualizer": "1.0.13",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
-    "@zohodesk/hooks": "2.0.6",
+    "@zohodesk/hooks": "2.0.8",
     "@zohodesk/utils": "1.3.16",
     "@zohodesk/a11y": "2.3.8",
     "@zohodesk/layout": "3.1.0",
-    "@zohodesk/dotkit": "1.0.7",
+    "@zohodesk/dotkit": "1.0.9",
     "color": "4.2.3"
   }
 }